Menu
I always get height: 0 on the body, Why this happens?
Either I use height, min-height, etc.
983
Height = 0 because the parent of the elements have 0 height, so make sure your parent, which is body here have 100% height or else. Save this answer.
It has zero height because the content inside it is floated. Floated elements are ignored when calculating the height of their parent. This can be easily solved. Setting its overflow property to "hidden" will force it to wrap around floated elements.
Conclusion. With no height value provided for the HTML element, setting the height and/or min-height of the body element to 100% results in no height (before you add content).
Here, 100vh means that the initial body height will take 100% of the viewport height, whereas the use of min-height instead of height will let the body element grow even more if necessary.
Just use:
body{
height:100vh;
}
This will force the body to 100% viewport height regardless of the page contents.
173
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