如何使导航栏和页脚固定。
图片显示:
开始了
HTML:
<div id="navbar"></div>
<div id="body-content"></div>
<div id="footer"></div>
CSS:
#导航栏, #页脚{ 宽度:100%; 高度:20px; 背景:#ccc; 位置:固定 } #navbar {顶部:0} #footer {底部:0} html,正文 {高度:100%}
使用 3 个具有绝对位置的 div。
HTML
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
CSS
#header, #content, #footer { position absolute; left: 0; right: 0 }
#header { top: 0; height: 200px; }
#content { top: 200px; bottom: 200px; overflow-y: auto; }
#footer { bottom: 0; height: 200px;}
但如果可能,请避免这种情况。您将遇到小屏幕和页眉和页脚内容溢出的问题。