Html DIV - 强制高度 100%=/= 页面高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9734820/
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
DIV - Force height 100%=/= page height?
提问by Konzine
I am in a big of an issue here with a design I am trying to set up. Here is the website for a reference;
我在尝试设置的设计中遇到了一个大问题。这是网站供参考；
http://throwbackhero.com/index1.php
http://throwbackhero.com/index1.php
The problem is that I set the body to height: 100%; in the stylesheet and on the #wrapper div as well. The height goes off the current page height and does not take into account that there are other divs that could cause overflow.
问题是我将 body 设置为 height: 100%; 在样式表和 #wrapper div 中也是如此。高度超出当前页面高度，并没有考虑到可能导致溢出的其他 div。
I would like, a blank page to be the size of the browser even if the vertical size of the browser is changed, the content/wrapper div will shrink to accommodate.
我希望，即使浏览器的垂直尺寸发生变化，空白页面也是浏览器的大小，内容/包装器 div 也会缩小以适应。
Can this be done?
这能做到吗？
EDIT
编辑
Okay so clearly my original question was extremely confusing. Here is a picture;
好吧，很明显，我最初的问题非常令人困惑。这是一张图片；
So, in pic 1 (the left) is the issue. With height 100%; on the wrapper and content divs, it is creating that bad boy. I want it to look like picture, where the white/gray area grows/shrinks depending on the size of the browser...
因此，在图 1（左侧）中是问题所在。高度100%；在包装器和内容 div 上，它正在创造那个坏男孩。我希望它看起来像图片，其中白色/灰色区域根据浏览器的大小增长/缩小......
回答by alchuang
The easiest way is simply using CSS:
最简单的方法是简单地使用 CSS：
height: 100vh;
Where 'vh' stands as vertical height of the browser window. Responsive to resizing of brower and mobile devices.
其中“vh”代表浏览器窗口的垂直高度。响应调整浏览器和移动设备的大小。
回答by sandeep
Give body,HTML & main DIV height 100%. write like this:
给出 body、HTML 和主 DIV height 100%。像这样写：
body,html{height:100%;}
.parent{
min-height:100%;
width:400px;
margin:0 auto;
background:red;
}
Check this http://jsfiddle.net/3VUGt/
回答by MakuraYami
Add overflow:autoto the wrapperelement.
添加overflow:auto到wrapper元素。
回答by XSapien
There is no complete CSS solution for this problem. This CSS "issue" has been known for many years. Since CSS has grown in functionality over the years, I thought there may be a complete CSS solution by now. But alas, there is not. I have tried many things and have searched high and low, and the issue remains the same.
这个问题没有完整的 CSS 解决方案。这个 CSS“问题”已经为人所知多年。由于多年来 CSS 的功能不断增长，我认为现在可能有一个完整的 CSS 解决方案。但可惜，没有。我尝试了很多东西，搜索了高低，问题仍然存在。
To my knowledge, there are only 3 solutions that do not require 3rd party libraries: absolute positioning, faux colums (two-tone repeating background) and JS.
据我所知，只有 3 种解决方案不需要 3rd 方库：绝对定位、假列（双音重复背景）和 JS。
The only two solutions that appeal to me are: faux columns and JS. I prefer the JS solution, since it makes more use of CSS. With JS you don't have to re-work the background image if you want to change the column width or color later on. It is a more adaptable and re-useable solution. The only advantage I can see for creating faux columns is that your layout doesn't break if the client disables JS.
唯一吸引我的两个解决方案是：假列和 JS。我更喜欢 JS 解决方案，因为它更多地使用 CSS。使用 JS，如果您以后想更改列宽或颜色，则不必重新处理背景图像。它是一种更具适应性和可重用性的解决方案。我可以看到创建假列的唯一优势是，如果客户端禁用 JS，您的布局不会中断。
JS solution (wrapper not required): https://jsfiddle.net/Kain52/uec9cLe4/
JS 解决方案（不需要包装器）：https: //jsfiddle.net/Kain52/uec9cLe4/
var side1 = document.getElementsByTagName('main')[0];
var side2 = document.getElementById('mainMenu');
var side1Height = side1.clientHeight;
var side2Height = side2.clientHeight;
if(side2Height < side1Height) { side2.style.height = side1Height + "px"; }
else { side1.style.height = side2Height + "px"; }
JS solution (wrapper required): https://jsfiddle.net/Kain52/7udh55zq/
JS 解决方案（需要包装器）：https: //jsfiddle.net/Kain52/7udh55zq/
var wrapperHeight = document.getElementById('innerWrapper').clientHeight;
document.getElementsByTagName('main')[0].style.height = wrapperHeight + "px";
document.getElementById('mainMenu').style.height = wrapperHeight + "px";
Explanation: If you use a div wrapper then you can assign it to the height of the wrapper. If you don't use a wrapper, then you can just set the height of the shortest side to the height of the longest side. If you know that your side menu bar will always be shorter than your content, then you only need two lines of code:
说明：如果您使用 div 包装器，则可以将其分配给包装器的高度。如果您不使用包装纸，那么您可以将最短边的高度设置为最长边的高度。如果你知道你的侧边菜单栏总是比你的内容短，那么你只需要两行代码：
var contentHeight = document.getElementsByTagName('main')[0].clientHeight;
document.getElementById('mainMenu').style.height = contentHeight + "px";
回答by DeadlYBlinder
The answer from @sandeep is correct. The best way of controlling the most basic container of display in the browser is to control html/body.
@sandeep 的回答是正确的。控制浏览器中最基本的显示容器的最好方法是控制html/body。
Normally, I need the same structure as you design: 1. the content should stay inside the container without overflow scroll, and 2. the container should resize as 100% while the browser is resizing.
通常，我需要与您设计的结构相同的结构：1. 内容应保留在容器内而不会溢出滚动，以及 2. 浏览器调整大小时，容器应调整为 100%。
So the basic way of doing it is:
所以这样做的基本方法是：
html, body {
height: 100%;
}
And I always set the basic container fit both height and width:
而且我总是将基本容器设置为适合高度和宽度：
html, body {
width: 100%;
height: 100%;
}
NOTE:there could a margin/padding issue for some browser (as user agent stylesheet): which add a style for some of basic component like body in default (e.g. Chrome 70.0.3538.102):
注意：某些浏览器可能存在边距/填充问题（作为用户代理样式表）：默认情况下为一些基本组件（如body）添加样式（例如Chrome 70.0.3538.102）：
body {
display: block;
margin: 8px;
}
Check within the developer mode, if that happens, add margin override, this also works for padding:
在开发人员模式中检查，如果发生这种情况，请添加边距覆盖，这也适用于填充：
html, body {
margin: 0;
width: 100%;
height: 100%;
}
And if your page base component looks like:
如果您的页面基本组件如下所示：
<body>
<div id="div1">
my html content ...
</div>
</body>
You could just do:
你可以这样做：
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#div1 {
position: absolute;
width: 100%;
height: 100%;
}
This always work for me. Hope it helps. And down here is what I guessed that the target you want to reach.
这总是对我有用。希望能帮助到你。下面是我猜你想达到的目标。
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#div1 {
position: relative;
width: 60%;
height: 100%;
background-color: rgb(255,125,125);
float: left;
}
#div2 {
position: relative;
width: 40%;
height: 100%;
background-color: rgb(125,255,125);
float: left;
}<div id="div1"> layer 1 </div>
<div id="div2"> layer 2 </div>回答by MineAndCraft12
If you are okay with having some JavaScript run every millisecond on your page, and the content above the white area in question will always be the same pixel height, you could try something along the lines of this...
如果您可以在页面上每毫秒运行一些 JavaScript，并且有问题的白色区域上方的内容将始终具有相同的像素高度，那么您可以尝试按照以下方式进行操作...
bodyLeadingFill = // put the size taken up by everything above the white div,
// including margin, padding, border, etc
function resizeElement(){
document.getElementById(/* name of white element here */).style.height = (window.innerHeight - bodyLeadingFill) * (/* put the % size you need here */ / 100) + "%";
}
window.setTimeout(resizeElement, 0);
This is, of course, assuming that the content above the white box will always be the same size no matter the font or operating system or size of the window.
当然，这是假设无论字体或操作系统或窗口大小如何，白框上方的内容始终大小相同。
I didn't actually test this myself, but the concept should work. Look out for the comments that say where to put some info.
我自己实际上并没有对此进行测试，但是这个概念应该可行。注意那些说明在哪里放置一些信息的评论。
