Menu
How would you get a height: 100% inside a min-height: 100% working?
578
In fact, height 100% corresponds to height of the screen minus the address bar at top of screen, while 100vh corresponds to height of the screen without the address bar.
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
To summarize: Basically, if the min-height is greater than what the height would otherwise be (whether an explicit height is specified or not), then the min-height is used as the height. If the min-height is less than what the height would otherwise be, then the min-height has no effect.
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.
I usually use:
position: absolute;
height: 100%;
And on the outer div:
position: relative;
min-height: 100%;
Using static positioning doesn't work, because the browser needs the outer div's height to calculate the inner div's height. But it doesn't know the outer div's height until it has calculated the inner div's...
However, my solution can't be used in many situations. Maybe someone else has a better one.
90
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
