我正在尝试使半透明的div覆盖整个屏幕。我尝试了这个：
#dimScreen
{
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
}
但这并不能覆盖整个屏幕，它只能覆盖div中的区域。
Answers:
添加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);
}
如果它不应该固定在屏幕上，请使用 position:absolute;
CSS技巧也有关于全屏属性的有趣文章。
编辑：
刚遇到这个答案，所以我想添加一些其他的东西。
就像评论中提到的丹尼尔·艾伦·兰登一样，请top:0; left:0;确保封面固定在屏幕的顶部和左侧。
如果某些元素位于封面的顶部（因此它不能覆盖所有内容），请添加z-index。数字越高，它涵盖的级别越多。
top: 0; left: 0;
您还需要将父元素设置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%;}
position:relative。不起作用。建议position:fixed。
使用 position:fixed这种方式，您的div将连续保持在整个可见区域内。
给您的div一个类，overlay并在CSS中创建以下规则
.overlay{
opacity:0.8;
background-color:#ccc;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:1000;
}
试试这个
#dimScreen {
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
position: fixed;
top: 0;
left: 0;
}
应用css-reset重设所有的边距和填充，如下所示
/* 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 */
}
现在将positiondiv的设置为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 */
}
请尝试将页边距设置为0。
<body style="margin: 0 0 0 0; padding: 0 0 0 0;">
position: absolute; top: 0; left: 0;