CODEWITHSUNDEEP
css
Flavio
Flavio

Reputation: 866

CSS fluid vertical layout

How can I write a CSS layout like this?

+---------+
| header  |
+---------+
|         |
| fill    |
|         |
+---------+

where:

I thought it was a simple solution, but can't get my head around it.

Thanks

Upvotes: 2

Views: 1474

Answers (3)

thirdender
thirdender

Reputation: 3951

What you're looking for is similar to the CSS necessary for a "sticky footer", in that you want to fill all the remaining vertical space, but still allow it to grow as necessary. There are a lot of tricky solutions, but most are not supported by IE before version 8 (that's when display: table; became possible in IE).

Here's a jsFiddle demo of a sticky footer solution I put together a while back, and the necessary jQuery code to make the layout work in IE7. If you don't need IE7 support, just leave out the Javascript code. Since you don't need the footer for your particular case, just leave out the footer element as well. And finally :-p The #header element is given a fixed height in the CSS. Remove the line height: 70pt; from the CSS to make the header height variable.

In the near future, the CSS Flexible Box model will make this kind of layout much easier, but browser support is still very minimal at this moment. Until it becomes more widely available, I recommend using the display: table; formatting instead.

Upvotes: 3

Chad
Chad

Reputation: 5418

Instead of trying to get the content to span the rest of the window apart from the header, instead make the body cover the window, style that, and let your content be a variable size.

I set up a simple jsfiddle for you: http://jsfiddle.net/xeP5M/

<div id="container">
    <div id="header">

    </div>
    <div id="fill">
        this is where content goes        
    </div>
</div>​

and the CSS: 

html, body { height: 100%; }
div { width: 100%; }

#container { background: #ff0; min-height: 100%; position: relative; }
#header { background: #f0f; height: 200px; }
#fill { background: #0f0; min-height: 100%; }

Cheers.

​

Upvotes: 1

Cody Guldner
Cody Guldner

Reputation: 2896

so you are going to start off with a container

<div id="contain">
</div>

Then we are going to add the header and footer and styling

<div id="contain">
   <div id="header">
      Content from Header
   </div>
   <div id="fill">
      Content from Fill
   </div>
</div>
#contain {
width:100%;
}
#header{
width:100%;
}
#fill{
width:100%;
min-height:100px;
}

The fill will automatically adjust itself to the height of the header

http://jsfiddle.net/burn123/gWkm8/

Upvotes: 1

Related Questions