允许div覆盖整个页面而不是容器内的区域
我试图让一个半透明的div覆盖整个屏幕。 我试过这个：
#dimScreen { width: 100%; height: 100%; background:rgba(255,255,255,0.5); } 但是这并不包括整个屏幕，它只覆盖了div内的区域。
添加position:fixed 。 然后，盖子固定在整个屏幕上，也滚动时。
并添加也许还有margin: 0; padding:0; 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); }
如果不能固定在屏幕上，请使用position:absolute;
CSS技巧也有关于全屏属性的一篇有趣的文章。
编辑：
刚刚遇到这个答案，所以我想添加一些额外的东西。
就像Daniel Allen Langdon在评论中提到的那样，加上top:0; left:0; top:0; left:0; 可以肯定的是，封面粘在屏幕的顶部和左侧。
如果某些元素位于封面的顶部（因此它不包含所有内容），请添加z-index 。 数字越高，涵盖的层次就越多。
您还需要将父元素设置为100%
html, body { height: 100%; }
演示 （更改background以供演示使用）
另外，当你想要覆盖整个屏幕，似乎你想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 */ }
如果是这样的话，比你不需要html, body {height: 100%;}
演示2
这将做的伎俩！
div { height: 100vh; width: 100vw; }
使用position:fixed这种方式你的div将继续在整个可视区域。
给你的div overlay一个类，并在你的CSS中创build下面的规则
.overlay{ opacity:0.8; background-color:#ccc; position:fixed; width:100%; height:100%; top:0px; left:0px; z-index:1000; }
演示： http : //www.jsfiddle.net/TtL7R/1/
#dimScreen{ position:fixed; top:0px; left:0px; width:100%; height:100%; }
尝试这个
#dimScreen { width: 100%; height: 100%; background:rgba(255,255,255,0.5); position: fixed; top: 0; left: 0; }
应用一个CSS重置来重置像这样的所有边距和填充
/* http://meyerweb.com/eric/tools/css/reset/
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; }
您可以使用各种CSS重置，正常和在CSS中使用
html { margin: 0px; padding: 0px; } body { margin: 0px; padding: 0px; }
将html和body标签的height为100%并删除身体边缘：
html, body { height: 100%; margin: 0px; /* Remove the margin around the body */ }
现在设置你的div的position是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 */ }
演示： http : //jsfiddle.net/F3LHW/
请尝试将边距和填充设置为0。
<body style="margin: 0 0 0 0; padding: 0 0 0 0;">
