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规则：

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

1 个答案: