Menu
I am trying to get some divss to expand to fill the screen, but I am struggling. I have broken down the issue on this jsfiddle.
What I really want to know is why does the div, with its 100% min-height, not expand to that height (or at all) when its parent has the same attribute and does expand?
<body>
<div>
stuff
</div>
</body>
body {
min-height: 100%;
background: red;
}
div {
min-height: 100%;
background: grey;
}
846
height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.
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.
The max-height CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height .
The issue is covered in the CSS 2.1 spec:
<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block. Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element.
So, to clarify, a percentage height will reference the height of its containing block (unless it is position: absolute or position: fixed). If that containing block does not have a specified height, then the percentage will refer to auto, and it won't really do much.
position: absolute changes the referenced containing block to the nearest positioned (absolute, relative, or fixed) element.
position: fixed changes the referenced containing block to the viewport.
So, if you specify a height on your containing block, specify a position other than static on your containing block, or don't mind using the viewport as your containing block, then you can use percentage heights effectively.
Please see my demonstration at jsFiddle
190
You need to also set the height of the html so that 100% refers to the viewport height instead of the document height (demo):
html,body {
height: 100%;
background: red;
padding: 0;
}
div {
height: 100%;
background: grey;
}
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
