[分享]css中div 自适应高度

在CSS中，学会让div实现自适应高度是非常有用的技巧。当我们在使用CSS来进行页面布局时，我们经常会使用div来构建一些块状元素。在这些元素中，我们常常碰到自适应高度的问题，这就需要我们掌握一些技巧...

在CSS中，学会让div实现自适应高度是非常有用的技巧。当我们在使用CSS来进行页面布局时，我们经常会使用div来构建一些块状元素。在这些元素中，我们常常碰到自适应高度的问题，这就需要我们掌握一些技巧。

 /* 简单的div样式 */
  .box {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
  } 

假设我们有一个简单的div元素，如上述代码所示。我们希望这个块元素可以自适应高度，以适应其中的内容。我们可以采用下面的代码：

 /* 自适应高度的div */
  .box {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    overflow: hidden;
  } 

我们只需要为这个块状元素添加一个overflow属性即可实现自适应高度。这是因为，元素的高度会被包含在元素中，元素的内容溢出时，会被隐藏掉。

当然，有时候我们希望元素的高度可以自适应到与其内部最高的元素相同。这时候，我们需要使用display属性实现：添加一个类名为clearfix的样式，定义如下：

 /* 清除浮动，自适应高度 */
  .clearfix:before, 
  .clearfix:after {
    content: " ";
    display: table;
  }

  .clearfix:after {
    clear: both;
  } 

使用这个类名的元素会自动清除其内部的所有浮动，并且自适应内部元素的高度。

总之，在CSS中，把div元素的自适应高度掌握好，可以使我们在页面布局时更加灵活自如。