我记得在学了网页自适应的内容后，每次写网页，力求宽高自适应。最后还是有一些困惑：写一个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自然就实现了宽高的自适应。
