Html 如何使浮动div 100％高度的父级？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3049783/
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 floated div 100% height of its parent?
提问by Nathan Osman
Here is the HTML:
这是 HTML：
<div id="outer">
<div id="inner"></div>
Test
</div>
And here is the CSS:
这是CSS：
#inner {
float: left;
height: 100%;
}
Upon inspection with the Chrome developer tools, the inner div is getting a height of 0px.
使用 Chrome 开发人员工具检查后，内部 div 的高度为 0px。
How can I force it to be 100% of the height of the parent div?
如何强制它是父 div 高度的 100%？
采纳答案by Chadwick
For #outerheight to be based on its content, and have #innerbase its height on that, make both elements absolutely positioned.
为了让#outer高度基于其内容，并#inner基于它的高度，使两个元素绝对定位。
More details can be found in the spec for the css height property, but essentially, #innermust ignore #outerheight if #outer's height is auto, unless#outeris positioned absolutely. Then #innerheight will be 0, unless#inneritself is positioned absolutely.
可以在css height 属性的规范中找到更多详细信息，但基本上，如果的高度为，则#inner必须忽略#outer高度，除非绝对定位。那么高度将为 0，除非它本身是绝对定位的。#outerauto#outer#inner#inner
<style>
#outer {
position:absolute;
height:auto; width:200px;
border: 1px solid red;
}
#inner {
position:absolute;
height:100%;
width:20px;
border: 1px solid black;
}
</style>
<div id='outer'>
<div id='inner'>
</div>
text
</div>
However... By positioning #innerabsolutely, a floatsetting will be ignored, so you will need to choose a width for #innerexplicitly, and add padding in #outerto fake the text wrapping I suspect you want. For example, below, the padding of #outeris the width of #inner+3. Conveniently (as the whole point was to get #innerheight to 100%) there's no need to wrap text beneath #inner, so this will look just like #inneris floated.
但是......通过#inner绝对定位，一个float设置将被忽略，所以你需要#inner明确地选择一个宽度，并添加填充#outer来伪造我怀疑你想要的文本换行。比如下面的padding#outer就是#inner+3的宽度。方便地（因为重点是将#inner高度提高到 100%）不需要在 下换行#inner，所以这看起来就像#inner是浮动的。
<style>
#outer2{
padding-left: 23px;
position:absolute;
height:auto;
width:200px;
border: 1px solid red;
}
#inner2{
left:0;
position:absolute;
height:100%;
width:20px;
border: 1px solid black;
}
</style>
<div id='outer2'>
<div id='inner2'>
</div>
text
</div>
I deleted my previous answer, as it was based on too many wrong assumptions about your goal.
我删除了我之前的答案，因为它基于对您的目标的太多错误假设。
回答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: Only drawback is IE as usual, IE9 does not support flex. http://caniuse.com/flexbox
编辑：唯一的缺点是 IE 和往常一样，IE9 不支持 flex。 http://caniuse.com/flexbox
Edit 2: As @toddsby noted, align items is for parent, and its default value actually is stretch. If you want a different value for child, there is align-self property.
编辑 2：正如@toddsby 所指出的，对齐项是针对父项的，其默认值实际上是拉伸。如果您想为孩子设置不同的值，则可以使用 align-self 属性。
Edit 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/
编辑 3：jsFiddle：https://jsfiddle.net/bv71tms5/2/
回答by Nathaniel Schweinberg
Actually, as long as the parent element is positioned, you can set the child's height to 100%. Namely, in case you don't want the parent to be absolutely positioned. Let me explain further:
实际上，只要定位了父元素，就可以将子元素的高度设置为 100%。也就是说，如果您不希望父项被绝对定位。让我进一步解释：
<style>
#outer2 {
padding-left: 23px;
position: relative;
height:auto;
width:200px;
border: 1px solid red;
}
#inner2 {
left:0;
position:absolute;
height:100%;
width:20px;
border: 1px solid black;
}
</style>
<div id='outer2'>
<div id='inner2'>
</div>
</div>
回答by Nathan Osman
As long as you don't need to support versions of Internet Explorer earlier than IE8, you can use display: table-cellto accomplish this:
只要您不需要支持 IE8 之前的 Internet Explorer 版本，您就可以使用display: table-cell：
HTML:
HTML：
<div class="outer">
<div class="inner">
<p>Menu or Whatever</p>
</div>
<div class="inner">
<p>Page contents...</p>
</div>
</div>
CSS:
CSS：
.inner {
display: table-cell;
}
This will force each element with the .innerclass to occupy the full height of its parent element.
这将强制每个具有.inner该类的元素占据其父元素的整个高度。
回答by Mandarinazul
I made an exampleresolving your problem.
我做了一个例子来解决你的问题。
You have to make a wrapper, float it, then position absolute your div and give to it 100% height.
你必须制作一个包装器，浮动它，然后绝对定位你的 div 并给它 100% 的高度。
HTML
HTML
<div class="container">
<div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
<div class="right-wrapper">
<div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
</div>
<div class="clear"> </div>
</div>
CSS:
CSS：
.container {
width: 100%;
position:relative;
}
.left {
width: 50%;
background-color: rgba(0, 0, 255, 0.6);
float: left;
}
.right-wrapper {
width: 48%;
float: left;
}
.right {
height: 100%;
position: absolute;
}
Explanation:The .right div is absolutely positioned. That means that its width and height, and top and left positiones will be calculed based on the first parent div absolutely or relative positioned ONLY if width or height properties are explicitly declared in CSS; if they aren't explicty declared, those properties will be calculed based on the parent container (.right-wrapper).
说明：.right div 是绝对定位的。这意味着它的宽度和高度，以及顶部和左侧的位置将基于第一个父 div 绝对或相对定位，仅当在 CSS 中明确声明宽度或高度属性时；如果它们没有明确声明，这些属性将根据父容器 (.right-wrapper) 计算。
So, the 100% height of the DIV will be calculed based on .container final height, and the final position of .right position will be calculed based on the parent container.
因此，DIV 的 100% 高度将根据 .container 最终高度计算，而 .right 位置的最终位置将根据父容器计算。
回答by leopinzon
Here it is a simpler way to achieve that:
这是实现这一目标的更简单方法：
- Set the three elements' container (#outer) display: table
- And set the elements themselves (#inner) display: table-cell
- Remove the floating.
- Success.
- 设置三个元素的容器（#outer）显示：table
- 并设置元素本身（#inner）显示：table-cell
- 去除浮动。
- 成功。
#outer{
display: table;
}
#inner {
display: table-cell;
float: none;
}
Thanks to @Itay in Floated div, 100% height
感谢@Itay in Floated div, 100% height
回答by Obi-Dan
If you're prepared to use a little jQuery, the answer is simple!
如果您准备使用一点 jQuery，答案很简单！
$(function() {
$('.parent').find('.child').css('height', $('.parent').innerHeight());
});
This works well for floating a single element to a side with 100% height of it's parent while other floated elements which would normally wrap around are kept to one side.
这适用于将单个元素浮动到其父元素 100% 高度的一侧，而其他通常会环绕的浮动元素保留在一侧。
Hope this helps fellow jQuery fans.
希望这可以帮助其他 jQuery 粉丝。
回答by Biswajit
This is a code sample for grid system with equal height.
这是等高网格系统的代码示例。
#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}
Above is the CSS for outer div
以上是外部 div 的 CSS
#inner{
width: 20%;
float: left;
border: 1px solid;
}
Above is the inner div
上面是内部div
Hope this help you
希望这对你有帮助
回答by sevenkey
This helped me.
这对我有帮助。
#outer {
position:relative;
}
#inner {
position:absolute;
top:0;
left:0px;
right:0px;
height:100%;
}
Change right: and left: to set preferable #inner width.
更改 right: 和 left: 以设置更合适的 #inner 宽度。
回答by romaroma
A similar case when you need several child elements have the same height can be solved with flexbox:
当您需要多个具有相同高度的子元素时，可以使用 flexbox 解决类似的情况：
https://css-tricks.com/using-flexbox/
https://css-tricks.com/using-flexbox/
Set display: flex;for parent and flex: 1;for child elements, they all will have the same height.
设置display: flex;为家长和flex: 1;儿童元素，它们都具有相同的高度。
