Question

我正在尝试将页面的页眉保持在页首和页脚的底部。如果容器增长，则应按下页脚。

我使用calc()跟踪工作代码，但所有浏览器都不支持它。所以，我需要替代方案。请注意，我只想要CSS解决方案。

代码：

header{
    height:50px;
    background:#CCC;
}
footer{
    height:30px;
    background:#333;
}
main{
    height:auto;
    min-height:calc(100% - 80px);
}

JsFiddle

任何帮助都将不胜感激。

由于

Answer 1

只需将您的主要内容设置为min-height为100％，其余为相同高度为您的页脚，例如（来自http://ryanfait.com/sticky-footer/）

* {
    margin: 0;
}
html, body {
    height: 100%;
    color:#FFF;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 155px;
}


<div class="wrapper">
    <header>Header</header>
    Main Content
    <div class="push"></div>
</div>
<footer>Footer</footer>

http://jsfiddle.net/u6rsLv1j/2/

Answer 2

尝试：

header{
    position:fixed;
    top:0;
    left:0;
    height:50px;
    background:#CCC;
}
footer{
    position:fixed;
    bottom:0;
    left:0;
    height:30px;
    background:#333;
}
main{
    height:auto;
    margin:50px 0 30px;
}

这样，您的页眉和页脚将始终保持在最顶部和最底部，只是“主”容器的内容似乎是可滚动的。不太确定这是你搜索的内容......

Answer 3

只需将绝对位置设置为页脚，相对于其父级的位置，如下面的代码所示。在这种情况下，位置固定不是一个好的解决方案，因为底部：固定位置的0表示第一个屏幕的底部，因此它不会随页面滚动。没有提到它有严重的问题f.ex.在移动设备上。

编辑：尝试在新窗口中运行以下代码段，因为预览未正确呈现。

＆＃13;

*{margin:0;padding:0;}
html,body{height:100%;width:100%; position:relative;}
header{height:50px;background:#CCC;}
footer{height:30px;width:100%;background:#333; position:absolute; bottom:0;}
/*main{height:auto;min-height:calc(100% - 80px);}*/
p{padding-top:5px;}
p:last-of-type{padding-bottom:5px;}

＆＃13;

<header></header>
<main>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
</main>
<footer></footer>

＆＃13;

Answer 4

关键是使用min-height和绝对位置相对。你走了：

<html>
<head>
    <style type="text/css">
    html, body{
        width:100%;
        height:100%;
        padding:0;
        margin:0;
    }


.page-wrapper{
    position:relative;
    min-height:100%;
    width:100%;
}
.header{
    height:50px;
    background:#CCC;
}
.footer{
    background:#333;
    height:30px;
    position:absolute;
    width:100%;
    bottom:0;
}
.main{

}
    </style>
</script>
</head>
<body>
    <div class="page-wrapper">
        <div class='header'>header</div>
        <div class='main'>main</div>
        <div class='footer'>footer</div>
    </div>
</body>

Answer 5

这是您问题的完整解决方案。

http://css-tricks.com/snippets/css/sticky-footer/

CSS - 保持页面高度

5 个答案: