I am working on getting the layout sorted for a pretty simple gallery webapp, but when I use an HTML5 doctype declaration, the height of some of my divs (which were 100%) get shrunk right down, and I can't seem to plump them back up using CSS.
My HTML is at https://dl.dropbox.com/u/16178847/eyewitness/b/index.html and css is at https://dl.dropbox.com/u/16178847/eyewitness/b/style.css
body { height: 100px }
and .container { height: 100px }
or .container { height: 100% }
, it becomes visible, but what I need is it to be is full height rather than a height in pixels.body { height: 100% }
the photo and footer divs are not visible again.What do I need to do to get it 100% in height so that my photo and footer divs are full height?
Only if the parent element has a defined height, i..e not a value of auto
. If that has 100% height, the parent's parent height must be defined, too. This could go until to the html
root element.
So set the height of the html
and the body
element to 100%
, as well as every single ancestor element of that element that you wish to have the 100%
height
in the first place.
See this example, to make it clearer:
html, body, .outer, .inner, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>
This wouldn't work, if I didn't give 100% height
to—say html
element:
body, .outer, .inner, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>
… or .inner
html, body, .outer, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>