Min height not working properly?

Question

I am trying to create a DIV that will have a minimum height of 100%, which is not working in FireFox / IE. It works only if use the "height" property.

Chrome is behaving correctly.

<style>
    .page{
        min-height:100%;
        border:1px solid black;
    }
</style>
<html>
    <div class="page">
        With firefox / IE, this div is not stretching to take 100% of the total page height.
    </div>
</html>

Update:

I understand that I need to define the height of the body/html. That makes sense. But even with this solution, I still cannot use min-height for a child div. See the below example. The child div is not taking 33% of the parent div. (In FIREFOX and IE)

<style>
    .page{
        min-height:100%;
        border:1px solid black;
    }

    html,
    body {
        height: 100%;
    }

    .child{
        min-height:33%;
        border:1px solid black;
        display:flex;
    }

</style>
<html>
    <div class="page">
        Parent div
    <div class="child">
        With firefox / IE, this CHILD div is not stretching to take 33% of the container.
    </div>
</div>
</html>

Possible duplicate of [min-height does not work with body](https://stackoverflow.com/questions/3740722/min-height-does-not-work-with-body) and a number of same answers found by searching SO. — Rob, Sep 03 '17 at 13:40
[Here is my answer from six years ago](https://stackoverflow.com/questions/8327304/problems-with-100-height/8327394#8327394) — Rob, Sep 03 '17 at 13:52
Did you read my duplicate answer from six years ago I linked to which directly addresses your updated question? — Rob, Sep 03 '17 at 14:13

Asons · Accepted Answer · 2017-09-03T14:37:00.807

You also need to give the html and body a height

html, body {
  height: 100%;
}

Update 1, after a question edit

With that new markup, also .page need height: 100%

html,
body {
  height: 100%;
}

.page {
  height: 100%;
  border: 1px solid black;
}

.child {
  min-height: 100%;
  border: 1px solid red;
  display: flex;
}

<div class="page">
  <div class="child">
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.
  </div>
</div>

Update 2, based on a comment

Use Flexbox and viewport units vh instead, it will work much better

body {
  display: flex;                 /*  IE need this for its 'min-height' bug  */
}

.page {
  min-height: 100vh;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.child {
  flex-grow: 1;
  border: 1px solid red;
}

<div class="page">
  <div class="child">
  
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
  </div>
</div>

Which also will work with the min-height: 33%

body {
  display: flex;                 /*  IE need this for its 'min-height' bug  */
}

.page {
  min-height: 100vh;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.child {
  min-height: 33%;
  border: 1px solid red;
}

<div class="page">
  <div class="child">
  
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
  </div>
</div>

@DavidSomekh Updated my answer. Do note, you need to make sure you put it all-in in the first place, as with this edit you made my initial answer invalid, which is not how to do it. If an edit invalidate the given answers, you are better of posting a new question. — Asons, Sep 03 '17 at 14:15
This answer brings me back to my original problem, that the height cannot exceed 100%. (Because it becomes static). Anyway around that? — David Somekh, Sep 03 '17 at 14:25
@DavidSomekh I guessed you would say that :), so my 2nd update solves it — Asons, Sep 03 '17 at 14:26

Ahmad Alfy · Answer 2 · 2023-06-23T10:09:22.217

The percentage value of min-height and height properties do not work if the direct parent of the element doesn't have an explicit height applied using CSS.

From MDN

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 percentage value is treated as 0.

The only way to do it is to add another div inside the parent div and explicitly set its height to 100% then insert the child div inside it then the min-height will work

<html>
  <body>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
  }
    .page{
        min-height:100%;
        border:1px solid black;
    }
    .wrapper {
      height: 100%;
    }
    .child {
      min-height: 33%;
      background: yellow;
    }
  </style>
    <div class="page">
        <div class="wrapper">
          <div class="child"></div>
        </div>
    </div>
  </body>
</html>

score 0 · Answer 3 · answered Sep 03 '17 at 13:41

To be honest, I'm not sure why it even works with the height property. When you're using percentage heights in CSS, the root element (html, body) needs to have a defined height.

This is because percentages are percentages of the parent. If the root element has no defined height, then no height can be calculated from it.

So to give the root element a height, you set it to 100% like this:

html, body {
  height: 100%;
}
.page{
  min-height:100%;
  border:1px solid black;
}

<div class="page">
  With firefox / IE, this div is not stretching to take 100% of the total page height.
</div>

score 0 · Answer 4 · answered Nov 17 '20 at 17:20

0

In my case solution was use min-height: 100vh

answered Nov 17 '20 at 17:20

Oleg

1,044
1
14
10

score 0 · Answer 5 · answered Jun 14 '22 at 14:24

0

In the case of table <th> \ <tr> the min-height is not working, but you can use heigh, and in this situation will behave as min-height.

answered Jun 14 '22 at 14:24

Radu Linu

1,143
13
29

score -1 · Answer 6 · answered Sep 03 '17 at 13:41

-1

Try adding to your CSS code this:

.page{
   min-height: 100%;
   -moz-min-height: 100%;
   border: 1px solid black;
}

Sometimes browsers do not act in the same way, and you need to add some things. Moz for mozilla firefox. -webkit-styleGoesHere is for Chrome. I hope this helped.

answered Sep 03 '17 at 13:41

Oqhax

419
1
4
16

1

`min-height` doesn't require a vendor prefix – Ahmad Alfy Sep 03 '17 at 14:38

Min height not working properly?

6 Answers6