ansaurus

Question

3 row layout, header and footer fixed height and fluid content but scrolling

Answer 1

A:

Even if you only have to support newer browsers, I think there's a solution that can do all browsers (or at least most). Approach it as a "footer push" solution. For instance:

CSS:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

HTML:

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <div class="header"></div>
            <div class="article"></div>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

So, now the header and footer are a set size, the middle (called the article) will fill the screen unless there's more content, in which case it will stretch. If you modify, be careful to notice the position of the wrapper div, which encapsulates the header and the body, but not the footer.

bpeterson76 2010-07-12 15:46:52

Just missing the scrolling in the middle. The middle should stretch the content to fit the page, but if the content inside the middle is too large for this, the middle div should scroll, not the whole page.

Nick Spacek 2010-07-13 18:16:45

ansaurus

tags:

views:

answers:

3 row layout, header and footer fixed height and fluid content but scrolling

related questions