2

我正在尝试创建一个具有固定页眉和页脚的站点，然后在其之间有一个内容 div 填充窗口（如高度 100%）而不将页脚推到折叠下方。

我创建了这个 JSFiddle 来说明我正在尝试做的事情：http: //jsfiddle.net/CZFBE/

<body>
<header>
    <nav>Menu</nav>
</header>
<section>
    <div class="hero">Hello World</div>
</section>
<footer>
    Copyright lol
</footer>
</body>

我需要 section 元素来填充空白的屏幕空间。这是可能吗？我已经尝试解决这个问题好几天了，我很感激任何帮助或想法！

提前致谢！

4

3 回答 3

1

我已经在 J​​SFiddle 中更新了您的代码：http: //jsfiddle.net/CZFBE/2/

html {
    height: 100%;
}
body {
    height:100%;
    min-height: 100%;
}
header {
    width:100%;
    top:0px;
    left:0px;
    background: grey;
    height: 4em;
    position:absolute;
}
section {
    height: 100%;
    background: lightgrey;
}
.hero {
    text-align: center;
}
footer {
    width:100%;
    bottom:0px;
    left:0px;
    position:absolute;
    background: grey;
    height: 4em;
}
于 2013-07-23T16:08:43.037 回答
0

尝试类似的方法，它对我有用：

header, footer, section{
    position: absolute;
    width: 100%;
    left: 0;
}
header, footer{
    height: 10%;
}
header{
    top: 0;
}
footer{
    bottom: 0;
}
section{
    height: 80%;
    top: 10%;
    overflow: auto;
}

页眉和页脚都占用 10% 的空间并且不会移动，部分占用其余部分并滚动。

于 2013-07-23T16:07:07.790 回答
0

看看这个JSFiddle

如果你给body和html height:100%

你也可以给你section的height:100%

鉴于您需要固定的页脚 + 页眉，这就是我想出的

body,html{
    height: 100%;
    margin: 0 auto;
}
header{
    background: grey;
    height: 4em;
    position: fixed;
    top: 0;
    width: 100%;
}
section{
    background: lightgrey;
    height: 100%;
    margin-top:4em;
}
.hero{
    text-align: center;
}
footer{
    background: grey;
    height: 4em;
    position: fixed;
    bottom: 0;
    width: 100%;
}
于 2013-07-23T16:07:35.633 回答