CSS min-height不适用于子div

Question

我知道为div添加min-height属性非常简单。但是如果没有提到c_left和c_right分区，下面我写的代码就可以了。

如果你看到下面的code.min-height对容器div不起作用，我认为你可以解决我的问题。

我的代码是

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

有人请帮助我为什么min-height不适用于容器div。

Answer 1

我认为无效，因为您同时具有height:1px;和min-height: 100px;属性，删除高度或使用大于min-height值的默认值。

Answer 2

子容器不会自动从最小高度继承。 CSS2.1规范：

百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值将计算为“auto”。

如果你没有在容器上放置最小高度，你没有明确指定它们的高度，它们会得到一个自动高度。

对于解决方法，您可以给孩子提供div：

display: table;
height: inherit;

示例：jsfiddle.net/xrebB/54 /

Answer 3

感谢您的回复。

Hashem Qolami给出的答案帮助了我。

overflow:hidden;

容器div的

使它可以扩展。

Answer 4

在班级clear: both中添加.footer：

#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

这是你的问题的解决方案。 试试这个。

＆＃13;

＆＃13;

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

    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;