Html 高度 100% 不起作用，div 内有两个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18955914/
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
height 100% doesn't work, two divs inside div
提问by Michael Blok
See css: http://jsfiddle.net/4JgA4/114/
见CSS：http: //jsfiddle.net/4JgA4/114/
Also here:
也在这里：
<div style="min-height:40px; border:solid 1px black; float:left;">
<div style="border:solid 1px black; height:150px; float:left;">
First to set height
</div>
<div style="border:solid 1px red; height:100%; float:left;">
Why don't get the 100%
</div>
</div>
Why does the second div doesn't get the 100%?
为什么第二个 div 没有得到 100%？
回答by Ni Ngo
<div style="min-height:40px; height:150px; border:solid 1px black; float:left;">
<div style="border:solid 1px black; height:100%; float:left;">
Your text 1
</div>
<div style="border:solid 1px red; height:100%; float:left;">
Your text 2
</div>
</div>
- The reason is you didn't put exact height (150px) for the first .
- One more thing, you have already put exact height for th first height, you only need to height = 100% for inside tags.
- 原因是您没有为第一个 .
- 还有一件事，您已经为第一个高度设置了确切的高度，您只需要为内部标签设置高度 = 100%。
Here is the result: http://jsfiddle.net/4JgA4/117/
回答by avrahamcool
as stated in other answers, the 100% don't work unless the parent height is also specified.
如其他答案所述，除非还指定了父身高，否则 100% 不起作用。
looks like you are trying to achieve 'equal column height', you don't have to set the parent height for that. using CSS table layout can be helpful here.
看起来您正在尝试实现“相等的列高”，您不必为此设置父高度。在这里使用 CSS 表格布局会很有帮助。
notice how clean this styling is. no floating elements, and no need to specify the same height again and again in different elements.
请注意这种样式是多么干净。没有浮动元素，也不需要在不同的元素中一次又一次地指定相同的高度。
look at this Fiddle
看看这个小提琴
best practice: separate your styling from your markup.
最佳实践：将样式与标记分开。
HTML:
HTML：
<div id="Parent">
<div>
First to set height
</div>
<div>
Why don't get the 100%
</div>
</div>
CSS:
CSS：
#Parent
{
display: table;
}
#Parent > div
{
display: table-cell;
border: 1px solid black;
}
#Parent > div:first-child /*if you want to fixed the first column height*/
{
height: 150px; /*or any other fixed height you want*/
}
回答by Kyle Muir
It doesn't get the full height because the original container has no height. So 100% of nothing is still nothing.
它没有得到完整的高度，因为原始容器没有高度。所以 100% 的无仍然是无。
If you give the parent div a height, then the 100% will take effect.
如果给父 div 一个高度，那么 100% 就会生效。
As seen here: http://jsfiddle.net/4JgA4/115/
如下所示：http: //jsfiddle.net/4JgA4/115/
<div style="min-height:40px; border:solid 1px black; float:left; height:150px;">
<div style="border:solid 1px black; height:150px; float:left;">
First to set height
</div>
<div style="border:solid 1px red; height:100%; float:left;">
Why don't get the 100%
</div>
</div>
回答by Shirin Abdolahi
because your parent div does not have property of heightwith height :100%you should have height:specific heighton parent element,but you have min-height,if the height is dynamic you should use jQuery to do this
因为你的父母DIV不具有的特性height与height :100%你应该有height:specific height父元素，但你必须min-height，如果高度是动态的，你应该使用jQuery来做到这一点
回答by rash111
it doesnt get height because the parent div has no height. use below code
它没有高度，因为父 div 没有高度。使用下面的代码
<div style="height:150px; border:solid 1px black; float:left;">
<div style="border:solid 1px black;height:100%; float:left;">
First to set height
</div>
<div style="border:solid 1px red; height:100%; float:left;">
Why don't get the 100%
</div>
</div>
回答by Sonu Sindhu
try to give height something 300px to parent div and see the result as you expected
尝试将高度设置为 300px 给父 div 并按预期查看结果
<div style="min-height:40px; height:300px; border:solid 1px black; float:left;">
<div style="border:solid 1px black; height:150px; float:left;">
First to set height
</div>
<div style="border:solid 1px red; height:100%; float:left;">
Why don't get the 100%
</div>
</div>
回答by Alex
if you want to set 100% height of any element you have to set the 100% to its parent element as well. Here is good explanation on how to do it with working example - http://www.tutorialrepublic.com/faq/how-to-set-a-div-height-to-100-percent-using-css.php
如果你想为任何元素设置 100% 的高度，你也必须将 100% 设置为其父元素。这是关于如何使用工作示例进行操作的很好解释 - http://www.tutorialrepublic.com/faq/how-to-set-a-div-height-to-100-percent-using-css.php
回答by SrishAkaTux
The example below illustrates how to assign 100% height or width to a div contained inside other divs
下面的示例说明了如何为包含在其他 div 中的 div 分配 100% 的高度或宽度
HTML Code:
HTML代码：
<div class="container">
<div class="span5 fill">
Hello World
</div>
</div>
CSS Code:
CSS 代码：
html,body{height:100%;}
.container {
height:100%;
}
.fill{
width:100%;
height:100%;
min-height:100%;
background-color:#990000;
padding:10px;
color:#efefef;
}
