Modern way to markup 100% height layout in HTML5 and CSS3

前端未结

关注

 8  897

I\'ve been away from marking up sites for some time. So, now we have HTML5 and a lot of new features in CSS. I have a common site layout with fixed size header and footer. And o

相关标签:

8条回答

傲寒

2021-02-02 12:08
Well, first of all in 2011 we dont use tables for layout anymore!

If I were you, I would write the markup like so:
```
<body>
   <div id="main" role="main">
        <header>
            contains logo, nav and has fixed height
        </header>
        <div class="content"> /*use <article> or <section> if it is appropriate - if not sure what to use, use a div*/
            actual content
        </div>
        <footer>
            fixed size footer
        </footer>
    </div>
</body>
```
And the CSS would be the same except the changed selectors
```
html, body { height:100% }
#main { height:100% }
footer { height:123px }
```
For a fixed footer, I would suggest to use position:absolute or maybe position:fixed - it depends how you want it to behave (scroll with page or always stay at bottom).

To make a "sticky" footer, that will be at the bottom of the page but move with the content, this method will do the trick.
0 讨论(0)
发布评论:

提交评论
- 加载中...

时光取名叫无心

2021-02-02 12:08

Let me add my contribution by adding 3 columns to your header / main / footer layout:

http://jsfiddle.net/ESrG9/

<!DOCTYPE html>
<table>
    <thead>
        <tr id="header">
            <th colspan="3">head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="left">main</td>
            <td id="main">main</td>
            <td id="right">main</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td id="footer" colspan="3">foot</td>
        </tr>
    </tfoot>
</table>

0 讨论(0)

小鲜肉

2021-02-02 12:14

So far nobody mentioned the flex-box method

https://jsfiddle.net/55r7n9or/

<!DOCTYPE html>
<html>
<head>
<style>

html, body, div {
            height:         100%;
            margin:         0;
            padding:        0 }

div {       display:        flex;
            flex-direction: column }

main {      flex:           1 }

header {    background:     red }
main {      background:     pink }
footer {    background:     purple }

</style>
</head>
<body>
<div>
  <header>hdr</header>
  <main>main</main>
  <footer>foot</footer>
</div>
</body>
</html>

0 讨论(0)

悲哀的现实

2021-02-02 12:15
Today, you would do like this (not much different really)

http://jsfiddle.net/5YHX7/3/
```
html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }
```
and
```
<html><body><div></div></body></html>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

甜味超标

2021-02-02 12:15

As asking for "modern" AND "compatible" is a contraction anyway, the grid method wasn't mentioned so far, and maybe is too modern right now, but with some adaptions might be a solution.

This article (and pointers) -with more complex use- is great to read: https://developers.google.com/web/updates/2017/01/css-grid

Now the code looks nice, however browsers don't... - so I added some forcing.

https://jsfiddle.net/qLcjg6L6/1/

<!DOCTYPE html>
<html>
<head>
<style>

html, body {
            height:             100%;
            min-height:         100vh;
            margin:             0;
            padding:            0 }

body {      display:            grid;
            grid-template-rows: minmax(auto, min-content) auto minmax(auto, min-content);
            grid-template-columns: 100% }

header {    background:         red }
main {      background:         pink }
footer {    background:         purple }

/* as this code is yet far from well-supported, here's a brute force... */
header {    height:             70px }
footer {    height:             60px }
main {      height:             calc(100vh - 130px); }
/* 130px being the sum of header/footer - adapt to your desired size/unit */

</style>
</head>
<body>
<header>hdr</header>
<main>main</main>
<footer>foot</footer>
</body>
</html>

0 讨论(0)

长情又很酷

2021-02-02 12:18

As you asked for "modern"... anno 2016 I have maybe a better answer than in 2013:

use the 100vh solution in CSS3. vh is a new unit and stands for ViewPort height.

html, body {            height:                 100% } 
header {                height:                 100px }
footer {                height:                 50px }
main {                  height:                 calc(100vh - 150px); }

html, body {            width:                  100% }  
header, main, footer {  width:                  1000px }

html, body {            margin:                 0 }
header, main, footer {  margin:                 0 auto }

html, body {            padding:                0 }

html, body {            text-align:             center }

body {                  background-color:       white } 
header {                background-color:       yellow }
main {                  background-color:       orange }
footer {                background-color:       red }

<!DOCTYPE html>
<meta charset="utf-8" />
<title>test</title>
<header>bla</header>
<main>bla</main>
<footer>bla</footer>

But if you wish to be compatible with old browsers, use the code in my 2013 answer.

0 讨论(0)

1 2 下一页