javascript - 使 DIV 覆盖 100% 的视口(viewport)而不是 100% 的主体

标签 javascript layout html height

我的帖子是关于 http://www.thepostboard.net

我需要让当前覆盖 100% 视口(viewport)的黑框改为覆盖整个页面。只有当您的屏幕需要滚动条才能查看网站时,您才会注意到这一点——否则它看起来不错。

我将覆盖的 div 设置为:

position: absolute;
height: 100%;
width: 100%;

我也有 body 设置为:

height: 100%;
margin: 0px 0px;
padding: 0px; 0px;

但出于某种原因,如果我在笔记本电脑上向下滚动,我会看到 DIV 的边缘,并且它下面没有任何东西被阻挡。

这样做的目的是为网站创建一个自定义灯箱。我已禁用使框变暗的 Javascript,以便您可以看到效果。

如何让它覆盖整个页面,而不仅仅是视口(viewport)?

(我的笔记本电脑是 1366x768,所以大概你会在任何高度分辨率 <= 760 的东西上看到它)。

最佳答案

<div>需要

top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
background-color: red;

然后它会保持在视口(viewport)的尺寸范围内并随滚动条“移动”。

编辑:如果<body>,它只会覆盖整个视口(viewport)。样式为

margin: 0;
padding: 0;

关于javascript - 使 DIV 覆盖 100% 的视口(viewport)而不是 100% 的主体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4343612/

相关文章:

Android: android:layout_width=wrap_content 但不能小于X dp?

html - 背景图片应该在背景颜色之上

javascript - 如何在不模糊的情况下拉伸(stretch) WebGL Canvas ?样式 "image-rendering"不起作用

html - 在 Bootstrap 3.0 中添加单词之间的空格(HTML 转义字符不起作用)

javascript - Mean.io 中奇怪的请求重复

javascript - 如何使用私有(private) GitHub 存储库作为 yarn 依赖项(未安装内部 deps)?

javascript - 如何使用 DIV 创建类似表格的 CSS 布局?

javascript - 想要在下拉列表更改事件时在 session 变量中设置值

javascript - 将 jquery 转换为纯 javascript

ruby-on-rails - 生产中测量员的 CSS 或布局问题