Html 使用 CSS 使 Div 元素达到浏览器窗口的 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37408368/
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
Make Div Element 100% Height of Browser Window Using CSS
提问by Ramin Daqiq
I am using bootstrap 3 to design a HTML page and right now I am facing a problem. I want my divtag container to take 100% height of the browser window but using CSS only (no javascript).
我正在使用 bootstrap 3 来设计一个 HTML 页面，现在我遇到了一个问题。我希望我的div标签容器占据浏览器窗口的 100% 高度，但仅使用 CSS（无 javascript）。
I went through lots of questions in stack overflow itself but couldn't find a solution that could help me. I don't want to use vh, as when you resize your window it wont work properly or wont show the container properly and I have 5 divtag containers and want every container to be the same size of the browser window.
我在堆栈溢出本身中遇到了很多问题，但找不到可以帮助我的解决方案。我不想使用vh，因为当您调整窗口大小时，它无法正常工作或无法正确显示容器，并且我有 5 个div标签容器，并且希望每个容器与浏览器窗口的大小相同。
p.s I don't think htmlor cssis required as it can be answered without the code.
ps 我不认为html或css不需要，因为它可以在没有代码的情况下回答。
回答by Harvey
All that is required is to set the 'min-height' CSS attribute of the Div you wish to re-size:
所需要做的就是设置要重新调整大小的 Div 的“min-height”CSS 属性：
<div style="min-height: 100%"></div>
<div style="min-height: 100%"></div>
Ensure your html & body tags have a heightof 100%also.
确保你的HTML和身体标签具有height的100%也。
回答by Remysc
Is thiswhat you want?
就是这个，你想要什么？
html, body {
height: 100%;
margin: 0;
}
#thediv{
min-height:100%;
min-width:100%;
background-color:red;
display:flex;
align-items:stretch;
position:relative;
}
.interiordiv{
background-color:blue;
width:50px;
margin:15px auto 15px auto;
}<div id="thediv">
<div class="interiordiv">A</div>
<div class="interiordiv">V</div>
<div class="interiordiv">C</div>
<div class="interiordiv">D</div>
<div class="interiordiv">E</div>
</div>If not please try to make it clearer, if you don't want to post code that's ok but post a mockup image or something.
如果不是，请尝试使其更清楚，如果您不想发布可以的代码但发布模型图像或其他内容。
回答by Tirthraj Rao
Here you go.. as you said you are using bootstrap, you might override the row class and achieve this easily.
给你......正如你所说的你正在使用引导程序，你可以覆盖行类并轻松实现这一点。
.row{
height:100%;
}
<div class="row bg-success"></div>
<div class="row bg-danger"></div>
<div class="row bg-warning"></div>
<div class="row bg-info"></div>
<div class="row bg-primary"></div>
Here are the screen sizes I tested it with.
这是我测试过的屏幕尺寸。
THESE TWO WERE FULL SCREEN DESKTOPS
这两个是全屏桌面
THESE WERE NON-FULL SCREEN BROWSER
这些是非全屏浏览器
THESE WERE IPHONE RESOLUTION IN PORTRAIT MODE
这些是肖像模式下的 IPHONE 分辨率
THESE WERE IPHONE RESOLUTION IN LANDSCAPE MODE
这些是风景模式下的 IPHONE 分辨率
