Html 使用 CSS 自动调整 div 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8795764/
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
Auto adjust div height with CSS
提问by Johnny
Let's say there is six divs one on the other.
假设有六个 div，一个在另一个上。
1st, 2nd and 3rd div has a fixed height e.g. 25px, 100px and 25px. 4th div is content area and should be an auto adjusting div. 5th div has some content and the min-height is 100px (height is NOT fixed). 6th div is a footer has a fixed height e.g. 25px.
第一个、第二个和第三个 div 具有固定的高度，例如 25px、100px 和 25px。第 4 个 div 是内容区域，应该是一个自动调整的 div。第 5 个 div 有一些内容，最小高度为 100 像素（高度不固定）。第 6 个 div 是具有固定高度的页脚，例如 25px。
5th and 6th divs should be always on the bottom of the page (NOT sticky)
第 5 个和第 6 个 div 应始终位于页面底部（非粘性）
There is no problem when the 4th div (div_auto_height) has a lot of content and the page is just as long or longer than the screen.
当第4个div（div_auto_height）有很多内容并且页面和屏幕一样长或长时没有问题。
The problem occurs when the page is shorter than the screen and the empty space comes after the 6th div. Then the 5th and 6th div are not where they supposed to be.
当页面比屏幕短并且第6个div之后出现空白时会出现问题。然后第 5 和第 6 个 div 不在它们应该在的位置。
The problem would be solved if one can get the height of the 4th div (div_auto_height) automatically adjusted to fill the empty space.
如果可以自动调整第 4 个 div (div_auto_height) 的高度以填充空白空间，则问题将得到解决。
I have been trying to solve this problem in many ways without a decent solution.
我一直在尝试以多种方式解决这个问题，但没有一个像样的解决方案。
Not working solutions:
不工作的解决方案：
- There are different screen resolutions, so min-height doesn't work with large screens without making the page a very long for small or wide screens.
- I haven't been able to get top and bottom positioning properties work properly because it makes divs 5 and 6 to come on top of 4th div (div_auto_height)
- 有不同的屏幕分辨率，因此 min-height 不适用于大屏幕，除非使页面对于小屏幕或宽屏幕来说很长。
- 我无法使顶部和底部定位属性正常工作，因为它使 div 5 和 6 位于第 4 个 div (div_auto_height) 的顶部
Here is a template for your modification:
这是您修改的模板：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>No title</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
#div1 {
height: 25px;
background-color: #123456;
}
#div2 {
height: 100px;
background-color: #345678;
}
#div3 {
height: 25px;
background-color: #567890;
}
#div_auto_height {
height: auto ;
background-color: #789012;
}
#div5 {
min-height: 100px;
background-color: #901234;
}
#div6 {
height: 25px;
background-color: #123456;
}
</style>
</head>
<body>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div_auto_height">This div should adjust automatically</div>
<div id="div5">Div 5</div>
<div id="div6">Div 6</div>
</body>
</html>
</body>
</html>
采纳答案by Mr Lister
There is no CSS way to give a property the value "total screen height - some fixed pixels". Use Javascript.
没有 CSS 方法可以为属性赋予值“总屏幕高度 - 一些固定像素”。使用 JavaScript。
回答by Adam Arold
I believe that you should use javascript to solve this problem. There are a lot of easy-to-use javascript frameworks out there like jquery.
我相信你应该使用javascript来解决这个问题。有很多易于使用的 javascript 框架，比如 jquery。
What you should do:
你应该做什么：
- give an id to your divs.
- using those ids find your divs - except for the fourth - and calculate their height
- get the height of the window
- set the 4th div's height by substracting the window height from the sum of your other divs height
- 给你的 div 一个 id。
- 使用这些 id 找到你的 div - 除了第四个 - 并计算它们的高度
- 获取窗口的高度
- 通过从其他 div 高度的总和中减去窗口高度来设置第 4 个 div 的高度
And that's all! Tell me if you need some code.
就这样！告诉我你是否需要一些代码。
edit:I didn't find the code but I remember that I used jquery dimensions. You can find example codes there!
编辑：我没有找到代码，但我记得我使用了jquery 维度。您可以在那里找到示例代码！
回答by Wex
This might not be the most viable solution for you, but if you know a max-heightfor the 5th and 6th div, you can use position: absoluteand padding(set to the max-heightvalue) to achieve your result:
这对您来说可能不是最可行的解决方案，但是如果您知道max-height第 5 个和第 6 个 div 的 a，您可以使用position: absoluteand padding（设置为max-height值）来实现您的结果：
<div id="wrapper">
<div class="div-25"></div>
<div class="div-100"></div>
<div class="div-25"></div>
<div id="content">
<div class="fluid">
</div>
</div>
</div>
<div id="container">
<div class="footer">
<div class="div-25"></div>
</div>
</div>
CSS:
CSS：
html, body {
margin: 0;
height: 100%; }
div { width: 100%; }
#wrapper { min-height: 100%; }
.div-25 {
background: green;
height: 25px; }
.div-100 {
background: grey;
height: 50px; }
#content { padding: 0 0 150px; } /* Max Height */
.fluid {
background: red;
height: 100px; }
#container { position: relative; }
.footer {
background: blue;
position: absolute;
bottom: 100%;
min-height: 100px; }
Preview: http://jsfiddle.net/Wexcode/jzdDU/
回答by crazyjune
change
改变
#div_auto_height {
height: auto ;
background-color: #789012;
}
to
到
#div_auto_height {
height: 100% ;
background-color: #789012;
}
or maybe you need this:
或者你可能需要这个：
#div_auto_height {
height: calc(100% - 275px); ;
background-color: #789012;
}
