使Div覆盖整个页面（不只是视口）？
所以我有一个问题，我认为是相当普遍的，但我还没有find一个好的解决scheme。 我想做一个覆盖div覆盖整个页面…不只是视口。 我不明白为什么这是很难做…我已经尝试设置身体，HTML高度100％等，但是这是行不通的。 这是我到目前为止：
<html> <head> <style type="text/css"> .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;} body { height: 100%; } html { height: 100%; } </style> </head> <body> <div style="height: 100%; width: 100%; position: relative;"> <div style="height: 100px; width: 300px; background-color: Red;"> </div> <div style="height: 230px; width: 9000px; background-color: Green;"> </div> <div style="height: 900px; width: 200px; background-color: Blue;"></div> <div class="OverLay">TestTest!</div> </div> </body> </html> 如果存在的话，我也可以打开JavaScript的解决scheme，但我宁愿只是使用一些简单的CSS。
视口是重要的，但您可能希望整个网站即使在滚动时也保持黑暗。 为此，您要使用position:fixed而不是position:absolute 。 当您滚动时，“固定”将使元素在屏幕上保持静止，给人的印象是整个身体变暗。
例如： http ： //jsbin.com/okabo3/edit
div.fadeMe { opacity: 0.5; background: #000; width: 100%; height: 100%; z-index: 10; top: 0; left: 0; position: fixed; }
<body> <div class="fadeMe"></div> <p>A bunch of content here...</p> </body>
body:before { content: " "; width: 100%; height: 100%; position: fixed; z-index: -1; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); }
首先，我认为你误解了什么是视口。 视口是浏览器用于呈现网页的区域，您不能以任何方式build立您的网站以覆盖此区域。
其次，你的overlay-div不能覆盖整个视口的原因似乎是因为你必须删除BODY和HTML的所有边距。
尝试在样式表顶部添加它 – 它将重置所有元素上的所有边距和填充。 进一步发展更容易：
* { margin: 0; padding: 0; }
编辑：我只是更好地理解你的问题。 Position: fixed; 就像乔纳森·桑普森（Jonathan Sampson）所写的那样。
我看了Nate Barr的回答，你似乎很喜欢。 这与简单似乎没有太大的区别
html {background-color: grey}
