Modern way to markup 100% height layout in HTML5 a

2019-03-10 23:08发布

站内问答 / HTML/CSS
1818 8 6

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 of course main content area in between. By default page should take 100% of window height (i.e. content area expands). And if content is long page vertical scrollbar appears and all like usual. Usually I used to do it by something like this:

<body>
   <table id="main" ...>
      <tr>
         <td id="header-and-content">
            <div id="header">contains logo, nav and has fixed height</div>
            <div id="content">actual content</div>
         </td>
      </tr>
      <tr>
         <td id="footer">
           fixed size footer
         </td>
      </tr>
   </table>
</body>

And accompanying css:

html, body { height:100% }
table#main { height:100% }
td#footer { height:123px }

So, it's obsolete. You, who keeps abreast of new markup techniques, how it is done by now in 2011?

UPD People, issue not about semantic markup or using divs. I know what it does mean. Issue now in - how do I tell footer to stay at bottom even while content is empty or short. When content is long enough footer just go down as it would do in other case. Absolute and fixed is not the solution (at least at its basic form)

SOME SUMMARY UPDATE

  1. I've tried method with usage of display:table and display:table-row and it works: little content, more content
  2. Method Make the Footer Stick to the Bottom of a Page was adviced by Andrej. It works also: little content, more content

Some disappointment though I feel: first method is just those tables but without table tag. The second is really old, I've avoided to use it because it resembles hack. My god, nothing new :)

8条回答
贪生不怕死
2楼-- · 2019-03-10 23:50

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) 举报
祖国的老花朵
3楼-- · 2019-03-10 23:51

In 2013 there is still nothing that beats a decent table that has respectively thead/tfoot/tbody.

The below (valid HTML5 page) is a fixed header and footer, 100% height and NOT ANY resize trouble.

<!DOCTYPE html>    
<meta charset="utf-8" />
<title>valid HTML5 / fixed header and footer / nada CSS sizing trouble</title>
<style type="text/css">

html, body, table { height:                 100% }    
th {                height:                 80px }    
#f {                height:                 40px }

table {             width:                  1000px }

html, body {        margin:                 0 }
table {             margin:                 0 auto }

td {                text-align:             left }      
html, body {        text-align:             center } /* important for old browsers */
th {                text-align:             right }

html, body {        background-color:       rgb(148,0,211) } 
#m {                background-color:       #f39 }

#m {                -webkit-border-radius:  25px;    
                    -khtml-border-radius:   25px;    
                    -moz-border-radius:     25px;    
                    -ms-border-radius:      25px;      
                    -o-border-radius:       25px;      
                    border-radius:          25px; }
</style>
<table>      
  <thead><tr><th>       head</th></tr></thead>
  <tfoot><tr><td id="f">foot</td></tr></tfoot>
  <tbody><tr><td id="m">main</td></tr></tbody>
</table>
查看更多
0人赞 添加讨论(0) 举报
beautiful°
4楼-- · 2019-03-10 23:52

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) 举报
ら.Afraid
5楼-- · 2019-03-10 23:53

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) 举报
我只想做你的唯一
6楼-- · 2019-03-11 00:02

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) 举报
贼婆χ
7楼-- · 2019-03-11 00:07

Technically you could probably still get away with laying out your page with table tags but it is now considered bad practice. It is considered good practice to use "semantic" web markup which means using tags for their intended purposes so a table tag should be used to represent table data and not invisible design. DIVs are intended for use designing your invisible page layout. A list apart is a great website resource for understanding these concepts.

This article is good for understanding semantic markup: http://www.alistapart.com/articles/12lessonsCSSandstandards

So all that said, here is a sample page that does what you want:

http://peterned.home.xs4all.nl/examples/csslayout1.html

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)