CSS min-height不適用於子div

Question

我知道爲div添加min-height屬性非常簡單，但是如果沒有提到c_left和c_right divisions，我在下面寫的代碼正在工作。

我認爲你可以得到我的問題，如果你看到下面的code.min高度不工作的集裝箱股利。

我的代碼是

#wrapper {width:1024px;min-height: 400px;margin: 0px auto; background: #ccc;} 
 
.header {height:150px;} 
 
.container{height:1px;min-height: 100px;width: 100%;} 
 
.container .c_left {float: left;width:50%;} 
 
.container .c_right {float: right;width:50%;} 
 
.footer {height: 100px;}

<div id="wrapper"> 
 
    <div class="header"> 
 
     header 
 
    </div> 
 
    <div class="container"> 
 
     <div class="c_left"> 
 
      container 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
     </div> 
 
     <div class="c_right"> 
 
      container 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
     </div> 
 
    </div> 
 
    <div class="footer"> 
 
     footer 
 
    </div> 
 
</div>

有人請幫助我，爲什麼最小高度未對集裝箱DIV工作。

Answer 1

感謝您的答覆。

哈希姆Qolami給出的答案幫助我。

overflow:hidden; 

爲容器div使其可擴展。

Answer 2

我認爲不工作，因爲你有height:1px;和min-height: 100px;屬性，刪除高度或使用大於最小高度值的默認值。

Answer 3

子容器不會自動從最小高度繼承。 CSS2.1規格：

百分比是相對於生成的框的包含塊的高度進行計算的。如果未明確指定包含塊的高度（即，它取決於內容高度），並且該元素沒有被絕對定位，則該值計算爲'auto'。

如果您沒有在容器上放置最小高度，那麼您沒有明確指定它們的高度，並且它們會獲得自動高度。

一種解決辦法是，你可以給你的孩子的div：

display: table; 
height: inherit; 

例子：jsfiddle.net/xrebB/54/

Answer 4

在.footer類添加clear: both：

#wrapper { 
 
    width:1024px; 
 
    min-height: 400px; 
 
    margin: 0px auto; 
 
    background: #ccc; 
 
} 
 
.header { 
 
    height:150px; 
 
} 
 
.container { 
 
    height:1px; 
 
    min-height: 100px; 
 
    width: 100%; 
 
} 
 
.container .c_left { 
 
    float: left; 
 
    width:50%; 
 
} 
 
.container .c_right { 
 
    float: right; 
 
    width:50%; 
 
} 
 
.footer { 
 
    height: 100px; 
 
    clear: both;/*Add clear both*/ 
 
}

<div id="wrapper"> 
 
    <div class="header">header</div> 
 
    <div class="container"> 
 
     <div class="c_left">container 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
     </div> 
 
     <div class="c_right">container 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
      <p>Hello world</p> 
 
     </div> 
 
    </div> 
 
    <div class="footer">footer</div> 
 
</div>

Answer 5

這裏是你的問題的解決方案。 試試這個。

#wrapper { 
 

 
     width: 1024px; 
 

 
     min-height: 400px; 
 

 
     margin: 0px auto; 
 

 
     background: #ccc; 
 

 
    } 
 

 
    .header { 
 

 
     height: 150px; 
 

 
    } 
 

 
    .container { 
 

 
     height: 1px; 
 

 
     min-height: 100px; 
 

 
     width: 100%; 
 

 
     overflow: auto; 
 

 
    } 
 

 
    .container .c_left { 
 

 
     float: left; 
 

 
     width: 50%; 
 

 
    } 
 

 
    .container .c_right { 
 

 
     float: right; 
 

 
     width: 50%; 
 

 
    } 
 

 
    .footer { 
 

 
     height: 100px; 
 

 
    }

<div id="wrapper"> 
 
    <div class="header"> 
 
    header 
 
    </div> 
 
    <div class="container"> 
 
    <div class="c_left"> 
 
     container 
 
     <p>Hello world</p> 
 
     <p>Hello world</p> 
 
     <p>Hello world</p> 
 
     <p>Hello world</p> 
 
     <p>Hello world</p> 
 
     <p>Hello world</p> 
 
     <p>Hello world</p> 
 
     <p>Hello world</p> 
 
    </div> 
 
    <div class="c_right"> 
 
     container 
 
     <p>Hello world</p> 
 
     <p>Hello world</p> 
 
     <p>Hello world</p> 
 
     <p>Hello world</p> 
 
     <p>Hello world</p> 
 
     <p>Hello world</p> 
 
     <p>Hello world</p> 
 
     <p>Hello world</p> 
 
    </div> 
 
    </div> 
 
    <div class="footer"> 
 
    footer 
 
    </div> 
 
</div>