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%;
}