CSS min-height不适用于子div

I know it is very simple to add min-height property for a div.But the code what I wrote below is working if there are not c_left and c_right divisions mentioned.

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

I think you can get my problem if you see the below code.min-height not working for the container div.

如果您看到下面的code.min-height不适用于容器div,我认为您可以解决我的问题。

My code is

我的代码是

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

Someone please help me why min-height is not working for container div.

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

5 个解决方案

#1

I think is not working because you have both height:1px; and min-height: 100px; property, remove height or use a default value bigger then min-height value.

我觉得不行,因为你有两个身高:1px;和最小高度:100px;属性,删除高度或使用大于最小高度值的默认值。

#2

Thanks for your replies.

谢谢你的回复。

Answer given by Hashem Qolami helped me for this.

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

overflow:hidden;

for the container div made it extendable.

对于容器div使其可扩展。

#3

Child containers will not automatically inherit from min-height. CSS2.1 specs:

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

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

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

If you don't put a min-height on your containers, you're not explicitly specifying their height and they get an auto height.

如果您没有在容器上放置最小高度,则不会明确指定其高度,并且它们会获得自动高度。

For a workaround you could give your child divs:

对于解决方法,您可以给您的孩子div:

display: table;
height: inherit;

Example: jsfiddle.net/xrebB/54/

#4

Add clear: both in class .footer:

添加清楚:在类.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>

#5

here is solution of your problem. try this.

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

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

#1