Html 如果父 div 具有“最小高度”，如何强制内部 div 的高度等于父 div 的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5879668/
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 enforce the height of inner div to be equal to the height of the parent div, if the parent div has "min-height"?
提问by Misha Moroshko
Why in the following example the height of the inner divis not like wrapper's div?
为什么在下面的例子中内部的高度div不像包装器的div？
HTML:
HTML：
<div class="wrapper">
<div class="inner">Hello</div>
<div class="inner">Peace</div>
</div>
CSS:
CSS：
.wrapper {
background-color: #000;
min-height: 100px;
}
.inner {
display: inline-block;
background-color: #777;
height: 100%;
}
If I change min-height: 100px;to height: 100px;, then it looks OK. But, in my case, I need min-height.
如果我更改min-height: 100px;为height: 100px;，那么它看起来没问题。但是，就我而言，我需要min-height.
采纳答案by ariel
I believe this is the output you want: http://jsfiddle.net/xhp7x/
我相信这是你想要的输出：http: //jsfiddle.net/xhp7x/
.wrapper {
display: table;
background-color: #000;
height: 100px;
width: 100%;
}
.wrapper2 {
height: 100%;
display: table-row
}
.inner {
height: 100%;
display: inline-block;
background-color: #777;
margin-right: 10px;
vertical-align: top;
}
Had to add a second DIV wrapper2.
不得不添加第二个 DIV wrapper2。
Tested on chrome and firefox.
在 chrome 和 firefox 上测试。
回答by mystrdat
Some properties in CSS inherit the value of the parent automatically, some don't. Minimum height must be explicitly stated when you want it to inherit the parent's value:
CSS 中的某些属性会自动继承父级的值，有些则不会。当您希望它继承父级的值时，必须明确说明最小高度：
min-height: inherit;
回答by iain
You want to specify both, CSS heightis not the same as min-height. You want to specify both heightand min-height.
您想同时指定两者，CSSheight与min-height. 您想同时指定height和min-height。
height= When used as a%, this is a percent of the window heightmin-height= as you drag the window smaller, the DIV with a%heightwill continue to reduce until it hits themin-heightmax-height= as you drag the window larger, the DIV with a%heightwill continue to increase until it hits themax-height
height= 当用作 a 时%，这是窗口高度的百分比min-height= 当您将窗口拖得更小时，带有 a 的 DIV%height将继续减小，直到它碰到min-heightmax-height= 当您将窗口拖得更大时，带有 a 的 DIV%height将继续增加，直到它碰到max-height
http://jsfiddle.net/gpeKW/2/I've added a sample here with borders.
http://jsfiddle.net/gpeKW/2/我在这里添加了一个带边框的示例。
Slight change to the answer from your comment, you are pretty much correct from your original CSS.
对您评论中的答案略有更改，您的原始 CSS 几乎是正确的。
The below HTML will have a minimum div height of 100px. As the size of the inner DIV increases, the wrapper will automatically expand. I have demonstrated this by adding a styleattribute to the first inner class.
下面的 HTML 的最小 div 高度为 100px。随着内部 DIV 的大小增加，包装器将自动展开。我已经通过向style第一个内部添加一个属性来证明这一点class。
<html>
<head>
<title>Untitled Page</title>
<style type="text/css">
.wrapper
{
background-color: #000;
min-height:100px;
}
.inner
{
display: inline-block;
background-color: #777;
height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner" style="height:200px">test</div>
<div class="inner">Peace</div>
</div>
</body>
</html>
回答by Kent
I know one way to set the div child height the same as its parent div height is to use relative for the parent and absolute position for the child.
我知道将 div 子高度设置为与其父 div 高度相同的一种方法是对父级使用相对位置，对子级使用绝对位置。
.wrapper {
background-color: #000;
min-height: 100px;
position: relative;
}
.inner {
display: inline-block;
background-color: #777;
position: absolute;
height: 100%;
}
But this way will cause some problem, you have to adjust the child element so that it will be displayed properly
但是这种方式会导致一些问题，您必须调整子元素才能正确显示
P/s: Why don't you set it to the same height as its parent height? I mean, 100% is not x%... just thinking..
P/s：你为什么不把它设置成和它父高度一样的高度？我的意思是，100% 不是 x%……只是想……
Anyway, happy coding ;)
无论如何，快乐编码;)
