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

最新推荐文章于 2024-03-10 10:13:54 发布

你的玄烨

最新推荐文章于 2024-03-10 10:13:54 发布

阅读量689

点赞数

分类专栏： HTML5 CSS 文章标签： css css3 html html5

本文链接：https://blog.csdn.net/CCQStudy/article/details/107091849

版权

HTML5 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

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

width：100%;background：white；color：white；

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

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

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

方案一：

<style>
      div {
        position: absolute;
        left: 0;
        top: 0;
        background-color: #000;
        width: 100%;
        height: 100%;
      }
    </style>
     <div id="test"></div>

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

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

<style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      div {
        height: 100%;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <div id="test"></div>

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