Html 如何在不指定父级高度的情况下强制子级 div 为父级 div 高度的 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1122381/
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 force child div to be 100% of parent div's height without specifying parent's height?
提问by Aiphee
I have a site with the following structure:
我有一个具有以下结构的网站：
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
The navigation is on the left and the content div is on the right. The information for the content div is pulled in through PHP, so it's different every time.
导航在左侧，内容 div 在右侧。content div的信息是通过PHP拉进来的，所以每次都不一样。
How can I scale the navigation vertically so that its height is the same as the content div's height, no matter which page is loaded?
如何垂直缩放导航，使其高度与内容 div 的高度相同，无论加载哪个页面？
采纳答案by cletus
NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721
注意：此答案适用于不支持 Flexbox 标准的旧版浏览器。有关现代方法，请参阅：https: //stackoverflow.com/a/23300532/1155721
I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.
我建议你看看Equal Height Columns with Cross-Browser CSS and No Hacks。
Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.
基本上，以浏览器兼容的方式使用 CSS 执行此操作并非微不足道（但对于表格而言却微不足道），因此请找到合适的预打包解决方案。
Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.
此外，答案因您想要 100% 高度还是等高而异。通常是等高。如果是 100% 的高度，答案会略有不同。
回答by Aiphee
For the parent:
对于家长：
display: flex;
You should add some prefixes, http://css-tricks.com/using-flexbox/.
您应该添加一些前缀，http://css-tricks.com/using-flexbox/。
Edit: As @Adam Garner noted, align-items: stretch; is not needed. Its usage is also for parent, not children. If you want to define children stretching, you use align-self.
编辑：正如@Adam Garner 所指出的，对齐项目：拉伸；不需要。它的用法也适用于父级，而不是子级。如果要定义子项拉伸，请使用 align-self。
.parent {
background: red;
padding: 10px;
display:flex;
}
.other-child {
width: 100px;
background: yellow;
height: 150px;
padding: .5rem;
}
.child {
width: 100px;
background: blue;
}<div class="parent">
<div class="other-child">
Only used for stretching the parent
</div>
<div class="child"></div>
</div>回答by Travis
This is a frustrating issue that's dealt with designers all the time. The trick is that you need to set the height to 100% on BODY and HTML in your CSS.
这是一个一直困扰着设计师的令人沮丧的问题。诀窍是您需要在 CSS 中将 BODY 和 HTML 的高度设置为 100%。
html,body {
height:100%;
}
This seemingly pointless code is to define to the browser what 100% means. Frustrating, yes, but is the simplest way.
这段看似毫无意义的代码是向浏览器定义 100% 的含义。令人沮丧，是的，但这是最简单的方法。
回答by Paul Harvey
I find that setting the two columns to display: table-cell;instead of float: left;works well.
我发现将两列设置为display: table-cell;而不是float: left;效果很好。
回答by David says reinstate Monica
If you don't mind the navigation div being clipped in the event of an unexpectedly-short content div, there's at least one easy way:
如果您不介意在出现意外短的内容 div 时裁剪导航 div，那么至少有一种简单的方法：
#main {
position: relative;
}
#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}
#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}
Elsewise there's the faux-columnstechnique.
否则还有人造柱技术。
回答by Roman Kuntyi
#main {
overflow: hidden;
}
#navigation, #content {
margin-bottom: -1000px;
padding-bottom: 1000px;
}
回答by flavius
using jQuery:
使用jQuery：
$(function() {
function unifyHeights() {
var maxHeight = 0;
$('#container').children('#navigation, #content').each(function() {
var height = $(this).outerHeight();
// alert(height);
if ( height > maxHeight ) {
maxHeight = height;
}
});
$('#navigation, #content').css('height', maxHeight);
}
unifyHeights();
});
回答by Tony C
Try making the bottom margin 100%.
尝试将底部边距设为 100%。
margin-bottom: 100%;
回答by Sergiu
#main {
display: table;
}
#navigation, #content {
display: table-cell;
}
Look at this example.
看看这个例子。
回答by Hakan F?st?k
After long searching and try, nothing solved my problem except
经过长时间的搜索和尝试，除了
style = "height:100%;"
on the children div
关于儿童 div
and for parent apply this
和父母申请这个
.parent {
display: flex;
flex-direction: column;
}
also, I am using bootstrap and this did not corrupt the responsive for me.
另外，我正在使用引导程序，这并没有破坏我的响应。
