Question

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

我创建了这个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元素来填充空屏幕空间。这是可能吗？我一直试图解决这个问题几天，我感谢任何帮助或想法！

提前致谢！

Answer 1

我已经在JSFiddle中更新了你的代码：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;
}

Answer 2

尝试类似的东西，它对我有用：

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％的空间并且不移动，其余部分取下并滚动。

Answer 3

查看此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%;
}

固定页眉和页脚以及100％高度内容

3 个答案: