CODEWITHSUNDEEP
csslayoutheader
Annabelle
Annabelle

Reputation: 10716

CSS: 100% height content area with variable-height header

I have a page with a variable-height header, content area, and footer. I want the content area to always fill the viewport, and grow vertically to fit content as necessary. I've found lots of examples of doing this with fixed-height headers, but none where the height is unknown.

Any solution needs to work in IE 6, 7 and 8, Firefox 3.x and Safari 4. Can this be done with pure CSS? Do I have to give in and resort to table-based layout?

EDIT: An additional requirement is that I can place elements inside the content area and get them to expand to the full height of the content area (be it viewport height - header height - footer height or larger than that). Some of the content we want to display has "header" and "footer" sections of their own, so what I'm really looking for is a nestable solution.

Upvotes: 4

Views: 12342

Answers (6)

Marco Marsala
Marco Marsala

Reputation: 2460

Please try this for CSS: http://jsfiddle.net/K64Mm/6/ Variable height, content 100% height (supports even iframe 100% height), no superfluous scrollbars, scrollable on touch devices.

<div class="wrapper">
    <div class="top topBar">

    </div> 
    <div class="content">
        <iframe scrolling="yes" src="http://www.zeffirino.com"></iframe>
    </div>
</div>

html, body { width: 100%; height: 100%; overflow: hidden; margin: 0px; padding: 0px; }

.wrapper { width: 100%; height: 100%; padding-bottom: 45px; -webkit-overflow-scrolling: touch !important; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.top { height: 45px; background-color: red; }
.content { height: 100%; width: 100%; overflow: auto !important; }
.content iframe { display: block; border: none; width: 100%; height: 100%; }

Upvotes: 0

Marco Marsala
Marco Marsala

Reputation: 2460

Please see this fiddle: http://jsfiddle.net/qH6K3/

<div id="a">
    <div id="b1">BOX1</div>
    <div id="b2">BOX2</div>
</div>

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html,body{height:100%}

#b1 {
    background-color: red;
    height: 45px;
    width:100%;
}

#b2 {
    background: blue;
    height: 100%;
    width: 100%;
}

#a { height: 100%; padding-bottom: 45px; }

Upvotes: 0

jchook
jchook

Reputation: 7230

I spent a day experimenting with this option and hit so many odd dead-ends that my professional advice is now this:

You designed it wrong.

Skip the variable height header entirely. It's a dumb idea anyway. I did. Worked great for me. Now I am the proud owner of a significantly simpler DOM cobweb and no hurdles that lead me to stackoverflow.

Upvotes: 0

mlevit
mlevit

Reputation: 2736

Ok so the min-height CSS property doesn't work :)

I played around with an actual HTML file now and I believe I found a way.

.header-footer
{
    height: 10%;
    background-color: lightYellow;
    display: table;
    width: 100%;
}

.container
{
    margin-left: auto;
    margin-right: auto;
    height: 80%;
    width: 100%;
    display: table;
}

.inner
{   
    background-color: lightPink;
    height: 100%;
}

We use the display: table property to make sure each <div> sits nicely under and over the other ones.

NOTE: You have to set a height property for each of the elements on the page. It doesn't have to be as large as 10% that I chose, but at least something. Once the content is inserted into the element that is larger than the height value it should expand.

I've created two seperate HTML pages for you to examine to see if this suits you:

Hopefully this is what you're looking for.

Thanks

Upvotes: 1

mlevit
mlevit

Reputation: 2736

You can try using the min-height CSS property on the header, content and footer.

e.g.

.header-footer 
{
    min-height: 20%;
}

.content
{
    min-height: 80%;
}

Make sure that you set both <html> and <body> tags to have a min-height: 100% that way you can fill up the entire viewport.

This should allow for the page to expand as needed but stay at a minimum of 100%.

Thanks

Upvotes: 0

Gordon Gustafson
Gordon Gustafson

Reputation: 41239

if you want the header to change size, use a relative height. The content will already fill the viewport vertically.

Upvotes: 0

Related Questions