Menu
You can't base a percentage height on a parent that has no height set otherwise the height should default to auto (content doesn't count as height either). Also you can't base a child's percentage height on a parent that has min or max height set either as it must be a real height.
@intodesign, you can use percentages. The only thing your missing is setting html to height: 100% as well as the body.
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.
height:100vh The . box class has only 100vh which is 100% of the viewport height. When you set the height to 100vh, the box element will stretch its height to the full height of the viewport regardless of its parent height.
You need to set a 100% height on all your parent elements, in this case your body and html. This fiddle shows it working.
html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }<html><body><div></div></body></html>Make it 100% of the viewport height:
div {
height: 100vh;
}
Works in all modern browsers and IE>=9, see here for more info.
height: 100% works if you give a fixed size to the parent element.
You can achieve that by using positioning.
Try
position: absolute;
to get the 100% height.
You need to set 100% height on the parent element.
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