html - 底部栏 - 每个位置选项都会导致特殊问题

Question

每个页面都有底栏。

现在它有 CSS:

#bottom_nav {
    position: absolute;
    bottom: 0;
    left: 0;
    border-top-style: solid;
    border-color: #f7f7fe;
    background: url('http://localhost:3000/assets/font-try.jpg');
    height: 70px;
    width: 100%;
    font-family: "ProximaNova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;


}

但是使用 position: absolute; 如果文档高度大于窗口高度，它就会超出页面内容。

使用 position: relative; 如果有其他一些相对元素，页面将呈现错误。

position: fixed; - 与绝对结果相同。

和通常的margin-top如果文档高度很小，它可以在页面的中间。

目前我用 JS 脚本修复了它，但我确信有更好的方法，底栏的设置频率如何？

Answer 1

如果你的 HTML 是这样的:

<div id="page">
    <div id="header"></div>
    <div id="content"></div>
    <div id="bottom_nav"></div>
</div>

使用这个 CSS:

body {
    margin:0;
    padding:0;
    height:100%;
}
#page {
    min-height:100%;
    position:relative;
}
#header {
    background:#ff0;
    padding:10px;
}
#content {
    padding:10px;
    padding-bottom:60px;   /* Height of the footer */
}
#bottom_nav {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
}

还有一个适用于 IE 6 和 IE 5.5 的简单 CSS 规则:

#page {
    height:100%;
}