CODEWITHSUNDEEP
css
Sergey
Sergey

Reputation: 682

Fluid Vertical Layout

I've searched through many forums and questions, however could not find anything concerning fluid vertical (not horizontal layout).

I have markup as follows:

<div class="wrapper">
    <div class="header"></div>
    <div id="content"></div>
    <div class="footer"></div>
</div>

My CSS:

html,body {margin: 0; padding: 0; height: 100%;}
.wrapper {width: 900px; margin: 0 auto; height:auto !important; height:100%; min-height:100%; position: relative;}
#content {padding-bottom: 60px; /* For the footer padding */ }
.footer { position: absolute; bottom: 15px; height: 45px;}

In this case I have layout with fixed height of the header and content. The footer sticks to the bottom.

It's all great, but I want to make fluid vertical layout, so that the footer always sticks to the bottom (just as now) but the header and content have fluid heights: 30 and 70% accordingly.

How can I achieve that?

Upvotes: 4

Views: 5679

Answers (5)

vsync
vsync

Reputation: 130215

Demo Page - fixed fluid fixed

I've made a quick demo of a layout that is very common:

HTML

<body>
    <header>Header</header>
    <section>Content</section>
    <footer>Footer</footer>
</body>

CSS

html, body{ height:100%; }
/* you can use "border-spacing" on the body as well */
body{ display:table; width:100%; padding:0; margin:0; }
body > *{ display:table-row; }

header{ height:100px; }
section{ height:100%; }
footer{ height:50px; }


Note that this will only work in modern browsers

Upvotes: 0

dimib
dimib

Reputation: 756

As I had the same problem, you probably need a so called "sticky footer".

Look for example at http://ryanfait.com/sticky-footer/, it functions across all browsers. There's also a good article describing how to achieve it here: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Upvotes: 0

petermolnar
petermolnar

Reputation: 1626

Layout:

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

    <div id="content">
        <div id="content-text">
        </div>
    </div>

    <div id="footer">
    </div>

</div>
</body>
</html>

CSS:

html {
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
    height: 100%;
}

#container {
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    margin-left: auto;
    margin-right:auto;
    overflow:hidden;
}

#header,
#footer {
    position:absolute;
    left:0;
    z-index:2;
    width:100%;
    overflow:hidden;
}

#header {
    top:0;
    height:30%;
}

#footer {
    bottom:0;
    height:1.6em;
}

#content {
    position:absolute;
    bottom:0;
    top:0;
    right:0;
    left:0;
    z-index:10;
    width: 100%;
    height:auto;
    margin-top:30%;
    margin-bottom:1.6em;
    overflow:hidden;
}

#content-text {
    position:relative;
    width:100%;
    height:100%;
    margin-left: auto;
    margin-right:auto;
    overflow:auto;
}

I also recommend a CSS reset before this.

EDIT Sorry, first I added fix size for the header, I corrected it, though it seems to be a bit buggy this way. I'm still searching for the best way.

Upvotes: 3

Vilx-
Vilx-

Reputation: 106920

In cases like this I usually say - to hell with the CSS headaches, let's just use a good old fashion table instead!

HTML:

<table style="height: 100%">
    <tr>
        <td id="header"></td>
    </tr>
    <tr>
        <td id="contents"></td>
    </tr>
    <tr>
        <td id="footer"></td>
    </tr>
</table>

CSS:

body, html
{
    height: 100%;
}
#header
{
    background-color: red;
    height: 30% 
}
#contents
{
    background-color: lime;
    height: 70% 
}
#footer
{
    background-color: blue;
    height: 45px;
}

It might not be "stylish", but it gets the job done, and will be an order of magnitude simpler than the necessary CSS spiderweb. Also, if the contents of something get too big, it will (somehow, in a browser-specific fashion) resize to keep everything visible, adding a scrollbar to the body if necessary.

Upvotes: 0

Ariful Islam
Ariful Islam

Reputation: 7675

For footer you can try this

.footer { 
position: fixed; 
bottom: 0; 
height: 45px;
}

Upvotes: 0

Related Questions