使div适合初始屏幕
我想让div适合用户屏幕的初始高度和宽度.
我认为以下粗略绘制的图解释得更好:
#div
{
width: 100%;
height: 100%;
}
似乎不起作用
thi*_*dot 34
如果我理解正确(这里有一些混淆的空间):
#screenFiller {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 15px solid orange
}
你可能会在position: fixed版本之后:http://jsfiddle.net/zRpNp/1/
- 哈哈,我也喜欢你如何添加橙色边框:D (5认同)
Tin*_*boy 31
我个人喜欢纯CSS解决方案.只需使用该vh单位.
#filldiv
{
height: 100vh;
}
这将使div填充浏览器窗口的高度.
此外,您还可以使其填充浏览器窗口的宽度,这仅使用vw单位.
#filldiv
{
width: 100vw;
}
两者都显示在这个小提琴中
我个人非常喜欢这两个单元,因为它们可用于动态调整字体大小等内容.
为了澄清...
我会使用vh和vw（视口高度和视口宽度）
<html>
<body>
<div style="height:100vh;width:100vw">First screen section, fills a whole screen</div>
<div style="height:100vh;width:100vw;">Hmm... this too</div>
</body>
</html>
100% 不起作用，因为它只填充了容器（主体）的 100%，而不是屏幕。
编辑：一些浏览器不支持它，但我发现大多数现代浏览器都支持