CSS min-height不適用於子div

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

我認爲你可以得到我的問題，如果你看到下面的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工作。

來源

2014-09-24 Phani

你已經陷入了[X/Y的問題（http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem）。不需要使用'min-height'。容器不會包含柱子，因爲它們是浮動的並從正常流動中移除。你可以清除容器底部的浮點數，或給它一個「可見」值以外的「溢出」。像'.container {overflow：hidden; }'。 – 2014-09-24 09:13:28

是的，這個溢出效果很好。 – Phani 2014-09-24 09:18:07

感謝您的答覆。

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

overflow:hidden;

爲容器div使其可擴展。

來源

2014-09-24 09:21:06 Phani

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

來源

2014-09-24 09:08:40

我已經看到這保持高度和最小高度在其中一個CSS網站。即使如果我刪除，沒有用。 – Phani 2014-09-24 09:09:50

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

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

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

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

display: table; 
height: inherit;

例子：jsfiddle.net/xrebB/54/

來源

2014-09-24 09:17:10

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

來源

2014-09-24 09:54:03

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

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

來源

2014-09-24 10:24:45

CSS min-height不適用於子div

回答

相關問題