Menu
I have a situation where I am trying to make an element occupy 100% of the height of its container - and the container element only has min-height specified. Unfortunately, when I do this, the height directive is ignored. Here is an example. The "b" div, the red one, should fill the entire parent. It doesn't, not in IE7, Chrome, or FF3.6.
If I had "height: 1px" to the container, the "a" div, then "b" is stretched to the entire height of "a". See here. But this only in FF3.6 and IE7, not in Chrome. So I guess I am doing something wrong here.
I feel like this is a common problem that there must be a solution to that I'm just not seeing. What is the best way to achieve stretch-to-height in this case?
669
– What is Min Height 100vh in CSS? Min height 100vh means the element should occupy the web browser viewport height. This is always 100 percent of the web browser's viewport height. If there is more content, the element will stretch more than the viewport's height, which is a code example that will clear things up.
The difference between height and min-height is that height defines a value for the height and that's how tall the element will be. min-height says that the minimum height is some value but that the element can continue to grow past that defined height if needed (like the content inside makes it taller or whatever).
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.
Your CSS means that the child element's height is 100% of the specified height of the parent element. If you do not specify a height for the parent, then the 100% doesn't mean anything. Hence it doesn't work.
What you want can be achieved by using position:relative on the parent and position:absolute on the child:
http://jsfiddle.net/57EZn/25/
It's not a beautiful solution but it does what you are after.
122
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
