logo标签列表

如何让一个DIV在页面加载后填满整个屏幕

csshtml
7
我们正在制作我们城市的TEDx网站，但目前遇到了问题。
这是它的草稿版：tedx.mozerov.ru
我们有一个id为"section-event"的div，我们想让它在加载时占据整个页面。我们添加了height:100%;和width:100%;，但是该块仍然不能填满整个页面:(
请帮忙解决！
添加 position:absolute; top:0;left:0; 的解决方案确实有帮助，但是！它确实以我们想要的方式填充了屏幕，但现在下一个div出现在所需的div上面 :( 这是否与绝对定位有关？因为当我将position:relative;时，div不会填满整个屏幕，但下一个div是可以的。这是一个例子：tedx.mozerov.ru - lakeoffm
好的！我们找到了解决方案！我们在body标签中添加position:absolute;height:100%;width:100%;，然后我们的div就可以在整个屏幕上显示，而不需要定位属性 :) 只需使用height:100%和width:100%即可。 - lakeoffm
感谢所有参与的人！ - lakeoffm
5个回答
14

好的，不确定您将如何使用这个div，但是：

position: absolute; top: 0; left: 0; height: 100%; width: 100%;
1
你的答案应该是可行的，但请注意，如果div不是另一个标签的子元素，并且该标签相对或绝对定位并具有小于页面宽度/高度的定义宽度/高度，则此方法仅会填充页面。 - rogMaHall
这个解决方案使用绝对定位，从而将元素从自然文档流中移除。如何使用静态定位实现这一点？ - etayluz
1

我仍然无法评论其他人的答案，所以这是我的答案，只是对uotonyh的简单补充，可能有效。

将位置设置为absolute，并添加任意z-index。 只要z-index高于其他绝对/相对DIV，它就应该占据整个视口。 如果您在顶部和左侧看到空间，则将margin：0px; 添加到body css标记中。

例如。

#section-event {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 99;
}
0

这取决于您的网站布局，有时会存在不兼容性。但通常类似这样的东西可以起作用：

http://jsfiddle.net/8Pvtk/

#redoverlay {
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

我曾在一些网站上看到过这种用法，即 <div id="redoverlay"></div> 元素始终存在，但其可见性被禁用。当需要时，JavaScript 会将其设置为可见。
0
将height:100%应用于html和body元素。 我刚在FireBug中测试了一下，我认为它可以实现你想要的效果。
差不多，但还差一点。我也刚测试过了。 - adaam
-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接