Menu
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>
811
asked Dec 07 '25 08:12
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>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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
