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

回答

相关问题