3 row layout, header and footer fixed height and fluid content but scrolling_问答_开发者

Judging by earlier questions and their lack of answers, I'm not sure there will be a good answer for this. Fortunately, we only need to support newer browsers.

Looking for a layout to let us have a 3 rows with a fixed-size header and footer, but the center row is fluid with the height of the browser but will also scroll when it's content is too big.

Possible without JavaScript? We tried (simplified example):

<html style="height: 100%">开发者_StackOverflow社区;
<body style="height: 100%">
<section style="height: 100%; display: table;">
  <header style="display: table-row; height: 200px;">
    Header
  </header>
  <section style="display: table-row; height: 100%; overflow-y: auto;">
    Content
  </section>
  <footer style="display: table-row; height: 200px;">
  </footer>
</section>
</body>
</html>

Problem is that when the content section contains enough content to overflow the height of it, instead of scrolling the content stretches it instead. I had hoped that floating the contents might help, but no good there either.

Any ideas?

First of all, if you want fixed header and footer, you need an absolute (or fixed) reference to stick to :

.container {   
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

Then the easiest and modern way to express your top/stretch/bottom constraints is to use the flex display, in a top-to-bottom flow direction, along the full height of that absolute reference :

.content {
   display: flex;
   flex-direction: column;
   height: 100%;
}

Finally, define your flex contents and their alignment constraints:

header {
   align-content: flex-start;
}
.fluid-and-scrollable {
    flex: 1;
    overflow-y: scroll;
}
footer {   
   align-content: flex-end;
}

(Note that the flex-start and flex-end are not required actually, because the natural order of the elements in the HTML implies them).

Of course, depending on your browser support requirements, you'll have to deal with the proprietary/old syntax of the Flexible Box Layout.

See a demo here.

Edit: In case you'd want such a layout to apply on the whole viewport however, I would not recommend this solution, as iOS won't minify its browser bars if you don't scroll on the body. Instead I would recommend a more straighforward, old-fashioned solution that puts fixed header and footer over the body (check this alternative on your mobile Safari to check the difference).

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.

I know this is old, but I thought I'd throw another suggestion out there. My thought on browsers is anyone should be using a HTML5 capable browser. This would definitely depend on what the purpose of the site was for, but here's a setup I use (will give you that scrolling too without calling for it):

Set the Doctype to HTML (don't add all the extra stuff) to classify it as HTML5 site.

CSS:

* {
    margin: 0;
    padding: 0;
    line-height: 100%;
}

body {
    font: 1em Verdana, Geneva, sans-serif;
}

header {
    width: 100%;
    height: 150px;
    background-color: gray;
}

section {
    min-height: 100%;
    padding-bottom: 100px;
}

footer {
    width: 100%;
    height: 100px;
    background-color: #E0E0E0;
    position: fixed;
    bottom: 0;
    left: 0;        
}

HTML:

<body>

<header>
    header
</header>

<section>
        <strong>repeat to fill the page when you test overflow</strong>
            content. test the content. test the content. test the content. test the content. test the content. test the content.
</section>

<footer>
    footer
</footer>

</body>

If you ever need to check the content area, just add a border attribute to the * with a color like green - great way to see where your areas are going when you're changing it up.

If anyone disagrees, just let me know what's wrong with this. I use this to start and modify as I go if needed.

[p.s. tested with IE, Chrome and Mozilla - also... this will scroll the header and content, but not the footer. you can always use the same approach with the header that I did with the footer, but add a padding to the top of section that matches the height of header]