CSS 如何制作全屏div，并防止内容更改大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3276226/
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
how to make a full screen div, and prevent size to be changed by content?
提问by throwaway007
for my web application, i would like the main div to be full screen (both width and height = 100%), and regardless of content, i want it to stay at that size. that means, if there are not much content, it shouldn't shrink, and if there are too much content, it shouldn't push this main div.
对于我的 Web 应用程序，我希望主 div 为全屏（宽度和高度均为 100%），并且无论内容如何，我都希望它保持该大小。这意味着，如果内容不多，则不应缩小，如果内容过多，则不应推送此主div。
how can i do this?
我怎样才能做到这一点？
(i'm ok with hacks applied to this div, as long as it will keep contents hack-free)
（我可以对这个 div 进行黑客攻击，只要它能保持内容不受黑客攻击）
回答by lucideer
Or even just:
或者甚至只是：
<div id="full-size">
Your contents go here
</div>
html,body{ margin:0; padding:0; height:100%; width:100%; }
#full-size{
height:100%;
width:100%;
overflow:hidden; /* or overflow:auto; if you want scrollbars */
}
(html, body can be set to like.. 95%-99% or some such to account for slight inconsistencies in margins, etc.)
（html，body 可以设置为 like.. 95%-99% 或一些这样的，以解决边距等轻微不一致的问题。）
回答by JumpLink
#fullDiv {
height: 100%;
width: 100%;
left: 0;
top: 0;
overflow: hidden;
position: fixed;
}
回答by Zachary Anderson
Notice how most of these can only be used WITHOUT a DOCTYPE. I'm looking for the same answer, but I have a DOCTYPE. There is one way to do it with a DOCTYPE however, although it doesn't apply to the style of my site, but it will work on the type of page you want to create:
请注意其中大多数只能在没有 DOCTYPE 的情况下使用。我正在寻找相同的答案，但我有一个 DOCTYPE。然而，有一种方法可以使用 DOCTYPE 来实现，尽管它不适用于我网站的样式，但它可以在您要创建的页面类型上工作：
div#full-size{
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
overflow:hidden;
Now, this was mentioned earlier but I just wanted to clarify that this is normally used with a DOCTYPE, height:100%; only works without a DOCTYPE
现在，这在前面提到过，但我只是想澄清一下，这通常与 DOCTYPE, height:100%; 一起使用。仅在没有 DOCTYPE 的情况下有效
回答by Bob
<html>
<div style="width:100%; height:100%; position:fixed; left:0;top:0;overflow:hidden;">
</div>
</html>
回答by Dustin Young
I use this approach for drawing a modal overlay.
我使用这种方法来绘制模态叠加。
.fullDiv { width:100%; height:100%; position:fixed }
I believe the distinction here is the use of position:fixedwhich may or may not be applicable to your use case.
我相信这里的区别在于position:fixed的使用，它可能适用于您的用例，也可能不适用。
I also add z-index:1000; background:rgba(50,50,50,.7);
我也加 z-index:1000; background:rgba(50,50,50,.7);
Then, the modal content can live inside that div, and any content that was already on the page remains visible in the background but covered by the overlay fully while scrolling.
然后，模态内容可以存在于该 div 中，并且页面上已经存在的任何内容在背景中仍然可见，但在滚动时被覆盖完全覆盖。
回答by Robusto
#fullDiv {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow: hidden; /* or auto or scroll */
}
回答by mattbasta
Use the HTML
使用 HTML
<div id="full-size">
<div id="wrapper">
Your content goes here.
</div>
</div>
and use the CSS:
并使用 CSS：
html, body {margin:0;padding:0;height:100%;}
#full-size {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
overflow:hidden;
}
#wrapper {
/*You can add padding and margins here.*/
padding:0;
margin:0;
}
Make sure that the HTML is in the root element.
确保 HTML 位于根元素中。
Hope this helps!
希望这可以帮助！
