html - 固定 header 和页脚以及 100%高度内容

  显示原文与译文双语对照的内容
0 0

在create的header 和页脚中创建一个站点,然后在窗口之间设置一个内容 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元素来填充空屏幕空间。 这是否可以能? 我已经尝试了好几天了我很感激任何帮助或者想法 !

提前致谢!

时间:原作者:5个回答

0 0

我已经在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;
}
原作者:
0 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;
}

header 和footer都采用 10%个空格,不移动,部分接受其余内容并滚动。

原作者:
0 0

看看这个 JSFiddle

如果你给 bodyhtmlheight:100%

你可以通过给 section 一个 height:100% 来完成它

如果你需要固定页脚+ header,这就是我所提出

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%;
}
原作者:
...