dmi*_*try 21 html css layout html5
我已经离开了标记网站一段时间了.所以,现在我们有了HTML5和CSS中的许多新功能.我有一个固定大小页眉和页脚的常见网站布局.当然还有主要内容区域.默认情况下,页面应占窗口高度的100%(即内容区域扩展).如果内容是长页面垂直滚动条出现并且像往常一样.通常我习惯这样做:
<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>
随行css:
html, body { height:100% }
table#main { height:100% }
td#footer { height:123px }
所以,它已经过时了.你是谁,跟上新的标记技术,到现在为止如何在2011年完成？
UPD People,不是关于语义标记或使用div的问题.我知道它的意思.现在问题 - 即使内容为空或短,我如何告诉页脚保持在底部.当内容足够长时,只需像其他情况那样下去.绝对和固定不是解决方案(至少在其基本形式)
一些概要更新
虽然我觉得有点失望:第一种方法只是那些表但没有table标签.第二个真的很旧,我已经避免使用它,因为它类似于黑客.我的天啊,没什么新鲜的:)
r0s*_*kar 13
好吧,首先在2011年,我们不再使用表格进行布局了!
如果我是你,我会像这样写标记:
<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>
除了更改的选择器之外,CSS将是相同的
html, body { height:100% }
#main { height:100% }
footer { height:123px }
对于固定的页脚,我建议使用position:absolute或者可能position:fixed- 这取决于您希望它的行为方式(滚动页面或始终保持在底部).
要制作一个"粘性"页脚,它将位于页面底部但随内容一起移动,此方法可以解决问题.
在2013年,仍然没有什么比分别具有thead/tfoot/tbody的体面表更胜一筹.
下面(有效的HTML5页面)是一个固定的页眉和页脚,100%的高度,而不是任何调整大小的麻烦.
<!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>
| 归档时间： |
|
| 查看次数： |
61596 次 |
| 最近记录： |