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

为了使网页布局更加美观，我们经常需要设置div元素的高度。但是，当我们在div中放入不同长度的内容时，就会发现div的高度并不能自适应其内容的高度。这时，我们就需要使用CSS来解决这个问题。div {...

为了使网页布局更加美观，我们经常需要设置div元素的高度。但是，当我们在div中放入不同长度的内容时，就会发现div的高度并不能自适应其内容的高度。这时，我们就需要使用CSS来解决这个问题。

div {
  border: 1px solid #000;
  overflow: hidden;
} 

在上述代码中，我们为div元素设置了一个边框，并且将overflow属性设置为hidden。这是因为，当div中放入内容超过其高度时，如果不设置overflow属性，则内容会溢出到div的外面。而设置为hidden，则会自动隐藏超出部分，从而达到自适应的效果。

但是，仅仅设置overflow属性还不能完全解决问题。因为如果div中只有一行文字，那么其高度也会按照设置的数值显示，而不是自适应内容高度。这时，我们需要再加上一个属性：

div {
  border: 1px solid #000;
  overflow: hidden;
  display: table-cell;
  height: 1%;
  vertical-align: top;
} 

在上述代码中，我们加上了display、height和vertical-align属性。其中，display设置为table-cell，可以使div元素像表格单元格一样自适应内容高度，而不需要设置具体的高度值。height设置为1%，则是为了避免在div只有一行文字时高度过高的问题。vertical-align设置为top，则是为了使内容放置在div的顶部。

通过上述设置，我们就可以轻松地实现div高度随内容自适应的效果了。