身高100％不起作用，两个div的div

Question

看到里面的CSS：http://jsfiddle.net/4JgA4/114/

另外这里：

<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> 

为什么在第二个div没有得到100％？

Answer 1

由于原始容器没有高度，因此无法获得完整的高度。所以没有任何东西是100％。

如果您给父母div一个高度，那么100％将生效。

正如在这里看到：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> 

Answer 2

，因为你的父母DIV不具有height与height :100%属性，你应该父元素有height:specific height，但你必须min-height，如果高度是动态的，你应该使用jQuery要做到这一点

Answer 3

它没有得到高度，因为父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> 

Answer 4

试举高一些300到父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> 

See here

Answer 5

，如果你想设置的任何元素的100％的高度，你必须将100％设置为其父元素。下面是关于如何使用工作示例做很好的解释 - http://www.tutorialrepublic.com/faq/how-to-set-a-div-height-to-100-percent-using-css.php

Answer 6

<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> 

• 的原因是你没有把确切的高度（150像素）为先。
• 还有一件事，你已经把第一个高度的确切高度，你只需要高度= 100％的内部标签。

下面是结果：http://jsfiddle.net/4JgA4/117/

Answer 7

在其他的答案说，100％的人不工作，除非还指定了家长的高度。

看起来您正在尝试实现'等列高'，您不必为此设置父高度。使用CSS表格布局的 在这里可能会有所帮助。

注意这个样式是多么的干净。没有浮动元素，也不需要在不同元素中一次又一次指定相同的高度。

看看这个Fiddle

最佳实践：从您的标记分开你的造型。

HTML：

<div id="Parent"> 
     <div> 
     First to set height 
     </div> 
     <div> 
     Why don't get the 100% 
    </div> 
</div> 

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*/ 
} 

Answer 8

下面的例子说明了如何100％的高度或宽度分配给包含在其它的div内一个div

HTML代码：

<div class="container"> 
<div class="span5 fill"> 
Hello World 
</div> 
</div> 

CSS代码：

html,body{height:100%;} 

.container { 
    height:100%; 
} 

.fill{ 
    width:100%; 
    height:100%; 
    min-height:100%; 
    background-color:#990000; 
    padding:10px; 
    color:#efefef; 
}