我记得在学了网页自适应的内容后,每次写网页,力求宽高自适应。最后还是有一些困惑:写一个div给样式。(给定背景色和字体色是为了便于我们观察。)
状况:如果我们不在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自然就实现了宽高的自适应。