Menu
Possible Duplicate:
CSS - 100% height doesn’t work
I have 3 divs, the div-1 is a background and div-2 and div-3 are two containers (one for text and one for photo).
#div-1 {
width: 100%;
height: 100%;
padding: 40px 0;
margin: 0;
}
#div-2 {
width: 500px;
margin: 0;
float: left;
}
#div-3 {
width: 200px;
margin: 0;
float: right;
}<div id="div-1">
<div id="div-2"></div>
<div id="div-3"></div>
</div>This is what I get:
Why height: 100% doesn't work?
901
Answer: Set the 100% height for parents too And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are a few workarounds to this though. For instance you can set it to height: 100vh; This will create the element to be 100% of your window height. Or you can use px instead.
Example 2: The second way to achieve this by using align-items property in the parent div to 'stretch'. It makes every . child-div 100% height of it's parent height.
You could try setting the parents position to relative (position: relative;). Then set the child's position to absolute. You should then be able to give the child top and bottom values (top: 0; bottom: 0;) making it stretch out the entire height of the parent.
This can work
<div id="div-1">
<div id="div-2"></div>
<div id="div-3"></div>
<div style="clear:both"></div>
</div>
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
