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

<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 像素）。
• 還有一件事，你已經為第一個高度設置了准確的高度，你只需要為內部標簽設置 height = 100% 。

這是結果： http://jsfiddle.net/4JgA4/117/

Answer 2

它沒有得到完整的高度，因為原始容器沒有高度。 所以 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 3

因為你的父 div 沒有高度的屬性height height:100%你應該有height:specific height on parent element，但是你有min-height ，如果高度是動態的你應該使用 jQuery 來做到這一點

Answer 4

如其他答案所述，除非還指定了父身高，否則 100% 不起作用。

看起來您正在嘗試實現“相等的列高”，您不必為此設置父級高度。 使用 CSS 表格布局在這里會有所幫助。

注意這個造型有多干凈。 沒有浮動元素，也不需要在不同的元素中一次又一次地指定相同的高度。

看看這個小提琴

最佳實踐：將樣式與標記分開。

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 5

它沒有獲得高度，因為父 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 6

嘗試將高度設置為 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>

看這里

Answer 7

如果要將任何元素的高度設置為 100%，則還必須將 100% 設置為其父元素。 這是關於如何使用工作示例進行操作的很好的解釋 - http://www.tutorialrepublic.com/faq/how-to-set-a-div-height-to-100-percent-using-css.php

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