[分享]css中如何自动变高度

在CSS中，有时候我们需要自动调整元素的高度以适应内容的变化。下面介绍几种常用的方法： .autoheight { height: auto; } 方法一：使用height:auto这是最简单的方法，...

在CSS中，有时候我们需要自动调整元素的高度以适应内容的变化。下面介绍几种常用的方法：

 .auto-height {
    height: auto;
  } 

方法一：使用height:auto

这是最简单的方法，只需要在CSS中使用“height:auto”属性即可。这样元素的高度就会随着内容的增加而自动增长。但是要注意，这种方法对于position属性为absolute或fixed的元素无效。

 .clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
  }
  .clearfix {
    zoom: 1;
  } 

方法二：使用clearfix

对于包裹了浮动元素的父元素，我们可以使用clearfix来自动计算高度。

clearfix是一种非常常用的技巧，它的代码如上所示。使用clearfix后，浮动元素不会超出父元素的高度，父元素的高度也会随之自动调整。

 .parent {
    display: table;
    height: 100%;
  }
  .child {
    display: table-cell;
    vertical-align: middle;
  } 

方法三：使用display:table-cell和vertical-align:middle

对于一些居中的布局，我们可以使用这种方法来自动计算高度。将父元素的display属性设为“table”，将子元素的display属性设为“table-cell”，再将子元素的vertical-align属性设为“middle”，就可以达到自动居中的效果。

以上便是CSS中自动变高度的常用方法，它们可以使我们更加方便地进行页面布局。