强迫症晚期患者：纯CSS实现div高度自适应浏览器。

客官°小女子只卖身不卖艺 2023-02-22 10:34 67阅读 0赞

我记得在学了网页自适应的内容后，每次写网页，力求宽高自适应。最后还是有一些困惑：写一个div给样式。（给定背景色和字体色是为了便于我们观察。）

<table> 
 <thead> 
  <tr> 
   <th>width：100%;background：white；color：white；</th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

**状况：** 如果我们不在div中书写内容，没有东西撑住div，div自适应该内容高度，div是不会显示的；还有，如果我们不给定div具体的高度值如100px,给100%高度，div也不会显示。

**我想要的效果是：** 给定div宽度100%，让div宽度自适应。高度也要自适应，但是在我不给定div具体高度值和不在该div中书写内容的前提下，它也要铺满整个浏览器。并且如果我们在里面书写内容，当内容的高度超过浏览器的高度的时候，它也自适应。

**经过一番查阅和实践** 我整理过来了两个纯CSS实现页面宽度，高度都自适应的方案

**方案一：**

**分析：** 给div一个绝对定位，这样该div脱离文档流，此时它的宽高就不受任何元素的影响，这时给div的宽高都为100%，该div就铺满了整个浏览器。以此div为父级容器，在里面书写页面其他内容，宽高也自然是自适应浏览器的。**但是**此时我们的body是这样的，只有宽度没有高度，那还是因为我们的div脱离文档流了啊。  
![在这里插入图片描述][20200702202425219.png]

\*\*方案二：\*\*这时我们应该想到了，我们的body也是一个块元素，上面说没有内容撑div，其实是没有内容撑我们的body。

**解析** 通过html,body\{heightn:100%;margin: 0;\}设置我们的body高度为100%，这时整个页面已经撑开，给定margin：0 是为了页面整体和浏览器无缝填充，这时也相当于给定整个页面的宽度为100%（黑色填满了页面作证了这一点）。那这会我们在给div一个100%的高度，div自然就实现了宽高的自适应。

[20200702202425219.png]: https://img-blog.csdnimg.cn/20200702202425219.png