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

前端未结

关注

 8  873

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:23

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)
发布评论:

提交评论
- 加载中...

[愿得一人]

2021-02-02 12:26

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)

上一页 1 2