身高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; 
}