children of min-height:100% do not apply height:100%

Question

I want the child elements of a height:100%; container to apply height:100%;. This seems to fail when there is a doctype present.

If you use min-height:100%; for the parent, the child elements don't apply height:100%;.

If you use height:100%; the child elements get stretched, but will overflow the parent. If you then try to use height:100%; on the parent and keep min-height:100%; on the children, the children won't stretch anymore.

Here's a little sample:

<!DOCTYPE html>
<html>
<head>
<title>Oh Well</title>
<style>
html, body {
    width: 100%;
    height:100%;
    background: white;
    margin:0;
    padding:0;
}

#min-h-100 {
    background-color: #eee;
    min-height: 100%;
}
#min-h-100 > div{
    min-height: 100%;
}

#h-100 {
    background-color: #ccc;
    height: 100%;
}
#h-100 > div {
    height: 100%;
}
</style>
</head>
<body>
<div id="min-h-100">
   <div>If this is heigher than the container, the container expands.</div>
   <div>The child elements do not get 100% height.</div>
</div>
<div id="h-100">
    <div>The child elements get 100% height.</div>
    <div>But there will be an overflow.</div>
</div>
<div>THIS SHOULD BE PUSHED DOWN</div>
</body>
</html>

edit: min-height doesn't inherit. @GCryrillus came up with the idea to apply display:table to the parent, which at least stretches the parent. @Volker E. created a codepen.

edit: If you don't want to support IE≤8, you can set the child min-height:100vh; which will make it at least as high as the viewport.

min-height is not inhertitable by min-height and not by any other rules . A **rules inherits only from similar rule** in parent — G-Cyrillus, Mar 30 '14 at 18:46
@GCyrillus so that's why min-height doesn't work, thanks :). Is there a way to prevent the overflow, or rather stretch the parent when using height:100%;? — mtaeschner, Mar 30 '14 at 18:51
you can try sending `height:100%` to all childs and use `display:table` , so it would allow them to stretch , you will need to set `width` too then — G-Cyrillus, Mar 30 '14 at 18:55
That didn't work either :(. Thanks for the quick response tho! — mtaeschner, Mar 30 '14 at 19:05
can you make a fiddle or a codepen on line , to see how you set theses rules ? — G-Cyrillus, Mar 30 '14 at 19:07

score 1 · Answer 1 · answered Mar 30 '14 at 19:10

I find this question interesting, especially case #2 with id="h-100" implying several height: 100% children on height: 100% parent.

I've come up with a Codepen including the different options. To prevent a overflow on the second case, you could also use overflow: hidden, but that would be an information loss.

@GCyrillus said it right, use display: table; and display: table-row/table-cell; conformingly to the child divs.

#h-100-table {
    background-color: #ddd;
    display: table;
    width: 100%;
    height: 100%;
}
#h-100-table > div {
    display: table-row;
    width: 100%;
}
#h-100-table > div > div { // you don't need to go for extra nesting, but it's clearer.
    display: table-cell;
    width: 100%;
}

The grand-children of #h-100-table are not essential, it's more for maintainability. You could go with table-row children only too.

@GCyrillus with your approach the parent stretched, but the second child just seems to show non-empty areas. — mtaeschner, Mar 30 '14 at 19:23

score 1 · Answer 2 · edited May 23 '17 at 11:49

1

If you don't want to support IE≤8, you can set the child min-height:100vh; which will make it at least as high as the viewport (so basically gives you the wanted effect). (seen here)

edited May 23 '17 at 11:49

Community

1
1

answered Mar 30 '14 at 19:58

mtaeschner

78
6

children of min-height:100% do not apply height:100%

2 Answers2