首页 > 代码库 > CSS中元素的height:100%如何起作用的?自适应高度
CSS中元素的height:100%如何起作用的?自适应高度
Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。而当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%
不起作用吗?
答:
高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。
因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。换句话说,父元素的高度只是一个缺省值:height: auto;
。当你要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined
的结果。也就是一个null值,浏览器不会对这个值有任何的反应。
如何使用绝对定位来使得自适应屏幕高度:将父级添加height:100%或者将元素绝对定位
1.<style>
*{padding: 0;margin: 0;}
body,html{height: 100%;}//父级元素都添加
#wrap{width: 100%;height: 100%;background: red;
/*position: absolute;left: 0;top: 0;*/
}
</style>
<title>Title</title>
</head>
<body>
<div id="wrap"></div>
</body>
2. <style>
*{padding: 0;}
#wrap{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}//不加绝对定位高度是撑不开的
</style>
<title>Title</title>
</head>
<body>
<div id="wrap"></div>
</body>
CSS中元素的height:100%如何起作用的?自适应高度
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。