css高度自适应如何实现？

　　PS：css宽度自适应的介绍内容，可以看这篇文章：css自适应布局：css宽度自适应如何实现？

　　首先，我们刚开始设计某些网页板块时，总会给其一个height高度值，让它刚好适合内容大小。

　　我们来看一个具体的实例代码。

　　<!DOCTYPEhtml>

　　<htmllang="en">

　　<head>

　　<metacharset="UTF-8">

　　<title>Title</title>

　　</head>

　　<styletype="text/css">

　　.con{

　　height:100px;

　　width:400px;

　　background-color:#9fcdff;

　　color:black;

　　}

　　</style>

　　<body>

　　<divclass="con">

　　<p>php中文网</p>

　　</div>

　　</body>

　　</html>

　　效果如下：

　　2345截图20180910111115.png

　　给其一个height高度值这种方法在你增加内容时，就会出现下面这种情况：

　　2345截图20180910111333.png

　　这就是所谓的高度不适应，也就是css高度无法根据内容实现自适应，那我们如何来实现css高度根据内容自适应呢？

　　其实很简单，这里我们只需要把height属性去掉，给它一个padding-bottom的值。那么，css高度就会根据内容来实现自适应。

　　padding-bottom属性设置元素的下内边距（底部空白）。

　　我们来看一下具体的高度自适应实现代码：