How would you get a height: 100% inside a min-height: 100% working?
Asked
Active
Viewed 4,104 times
8
-
By inside, do you mean like a `` inside a `– Xavier Ho May 15 '10 at 08:56`?
-
I mean:– David Lawson May 15 '10 at 09:06
1 Answers
11
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.
Chris Lercher
- 37,264
- 20
- 99
- 131
-
just to let others know: when inner is positioned absolute, its size becoming more than of parent WON"T result in outer div height increasing. inner is out of flow and thus parent doesn't care. – Muhammad Umer Dec 01 '14 at 17:05
-
Following this response, you could also remove the height attribute and set top:0 and bottom:0 with the same result. If there is a padding in the outer div of 13px, for example, you could set top:13px and bottom:13px, what I prefer to use calc(100% - 26px) for height if you want to keep inner div inside padding-box. – sergio0983 Jan 31 '16 at 13:36