[分享]css两个层高度相同

在网页设计中，经常出现需要让两个层高度相同的情况，比如左边是一个导航栏，右边是一个内容区域，需要让它们的高度相同，这时候可以用CSS来实现。.nav { float: left; width: 25;...

在网页设计中，经常出现需要让两个层高度相同的情况，比如左边是一个导航栏，右边是一个内容区域，需要让它们的高度相同，这时候可以用CSS来实现。

.nav {
  float: left;
  width: 25%;
  background-color: #f0f0f0;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.content {
  float: left;
  width: 75%;
  background-color: #fff;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
} 

上面的代码分别定义了一个导航栏和一个内容区域的样式，其中关键的一步是将它们的高度都设置为100%，这样它们在父容器中就会占满整个区域。同时也要注意让它们浮动到左侧，而且总宽度需要为100%，这样才能排列在同一行。

另外，还需要一个clearfix样式来清除它们的浮动，这个样式可以在父容器上添加，它的作用是让父容器包含子元素的浮动，从而保证子元素的高度相等。

<div class="parent clearfix">
  <div class="nav">
    ...
  </div>
  <div class="content">
    ...
  </div>
</div> 

最后，在HTML中添加父容器和子元素的结构，在父容器上添加clearfix样式即可。

通过CSS设置两个层高度相同的方法并不难，关键是要灵活运用CSS的特性，比如百分比高度、浮动和清除浮动等，这样才能实现超乎想象的网页设计。