CSS 允许 div 覆盖整个页面而不是容器内的区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18588835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Allow a div to cover the whole page instead of the area within the container
提问by Juicy
I'm trying to make a semi-transparent div cover the whole screen. I tried this:
我正在尝试使一个半透明的 div 覆盖整个屏幕。我试过这个：
#dimScreen
{
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
}
But that doesn't cover the whole screen, it only covers the area within the div.
但这并没有覆盖整个屏幕，它只覆盖了 div 内的区域。
回答by Michael Schmidt
Add position:fixed. Then the cover is fixed over the whole screen, also when you scroll.
And add maybe also margin: 0; padding:0;so it wont have some space's around the cover.
添加position:fixed. 然后封面固定在整个屏幕上，当您滚动时也是如此。
并添加也许也margin: 0; padding:0;这样它不会在封面周围有一些空间。
#dimScreen
{
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
}
And if it shouldn't stick on the screen fixed, use position:absolute;
如果它不应该粘在固定的屏幕上，请使用 position:absolute;
CSS Trickshave also an interesting article about fullscreen property.
CSS Tricks也有一篇关于全屏属性的有趣文章。
Edit:
Just came across this answer, so I wanted to add some additional things.
Like Daniel Allen Langdonmentioned in the comment, add top:0; left:0;to be sure, the cover sticks on the very top and left of the screen.
编辑：
刚刚遇到这个答案，所以我想添加一些额外的东西。
就像Daniel Allen Langdon在评论中提到的那样，请top:0; left:0;务必添加，封面贴在屏幕的最顶部和左侧。
If you some elements are at the top of the cover (so it doesn't cover everything), then add z-index. The higher the number, the more levels it covers.
如果您的某些元素位于封面顶部（因此它不会涵盖所有内容），则添加z-index. 数字越高，它涵盖的级别越多。
回答by Mr. Alien
You need to set the parent element to 100%as well
您还需要将父元素设置100%为
html, body {
height: 100%;
}
Demo(Changed the backgroundfor demo purpose)
演示（更改了background演示目的）
Also, when you want to cover entire screen, seems like you want to dim, so in this case, you need to use position: fixed;
另外，当你想覆盖整个屏幕时，似乎你想要dim，所以在这种情况下，你需要使用position: fixed;
#dimScreen {
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
position: fixed;
top: 0;
left: 0;
z-index: 100; /* Just to keep it at the very top */
}
If that's the case, than you don't need html, body {height: 100%;}
如果是这样的话，那你就不需要了 html, body {height: 100%;}
回答by Conner Frey
This will do the trick!
这将奏效！
div {
height: 100vh;
width: 100vw;
}
回答by Conner Frey
Use position:fixedthis way your div will remain over the whole viewable area continuously ..
使用position:fixed这种方式，您的 div 将持续保持在整个可视区域内..
give your div a class overlayand create the following rule in your CSS
给你的 div 一个类overlay并在你的 CSS 中创建以下规则
.overlay{
opacity:0.8;
background-color:#ccc;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:1000;
}
回答by tabone
#dimScreen{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
回答by Vladislav Stanic
Try this
尝试这个
#dimScreen {
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
position: fixed;
top: 0;
left: 0;
}
回答by Vinay Pratap Singh
Apply a css-reset to reset all the margins and paddings like this
应用 css-reset 来重置所有的边距和填充，就像这样
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126 License: none (public domain) */
v2.0 | 20110126 许可证：无（公共领域）*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
You can use various css-resets as you need, normal and use in css
您可以根据需要使用各种 css-reset，在 css 中正常和使用
html
{
margin: 0px;
padding: 0px;
}
body
{
margin: 0px;
padding: 0px;
}
回答by Vlabs
Set the html and body tags heightto 100%and remove the margin around the body:
将 html 和 body 标签设置height为100%并删除 body 周围的边距：
html, body {
height: 100%;
margin: 0px; /* Remove the margin around the body */
}
Now set the positionof your div to fixed:
现在将position您的 div设置为fixed：
#dimScreen
{
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
position: fixed;
top: 0px;
left: 0px;
z-index: 1000; /* Now the div will be on top */
}
回答by Devendra Patel
please try with setting margin and padding to 0 on body.
请尝试在身体上将边距和填充设置为 0。
<body style="margin: 0 0 0 0; padding: 0 0 0 0;">
