5

感谢您的关注。

我正在尝试制作一个非常简单的响应式 HTML 布局：

HTML：

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

CSS：

#header{
    width: 100%;
    height: 50px;
}

#content{
    width: 100%;
    height: 100%;
}

#footer{
    width: 100%;
    height: 50px;
}

最终产品应该是一个页面，该页面有一个 50px 高的页眉锚定在屏幕顶部，一个 50px 高的页脚锚定在屏幕底部。在这两者之间，“内容” div 应该扩展以填充页眉和页脚之间的空间，无论该空间的大小如何。

我已经查看了几个关于“粘性页脚”的教程，不幸的是，它们并不是我所追求的，因为它们没有考虑“内容” div 扩展以填充页眉和页脚之间的空间。

这是我所追求的一个接近的例子，但这个网站是用 Flash 编写的：

http://www.weareGolden.co.uk/

当您查看此内容时，请尝试调整屏幕大小。

我在这里想念什么？谢谢！

解决了！

HTML：

<div id="header">
</div>

<div id="content">
    content
</div>

<div id="footer">
</div>

CSS：

html, body {height: 100%; margin:0px !important;}

#header{
    position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    background-color: #777;
    z-index: 1;
}

#content{
    padding-top: 50px;
    padding-bottom: 50px;
    background-color:#ffffcc;
    position: fixed;
    top:0px;
    bottom:0px;
    width:100%;
}

#footer{
    background-color: #777;
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    z-index: 1;
}

谢谢！

4

3 回答 3

8

听起来你只需要修复页眉和页脚。

header{position:fixed; top:0; z-index:10}
footer{position:fixed; bottom:0; z-index:10}

如果大于空间，主体内容将在这些固定元素之间滚动。

请注意，我相信将 z-index 设置为 10 的倍数是一种很好的做法。这使您可以灵活地将一个元素插入到堆栈中（如果错过了一个元素）。

于 2013-08-11T19:23:28.067 回答
1

另一种方法是使用绝对定位（jsFiddle）：

#header, #content, #footer { 
    position: absolute; 
    left: 0; 
    right: 0; 
}

#header {
    height: 50px;
    top: 0;
}

#content {
    top: 50px;
    bottom: 50px;
}

#footer {
    height: 50px;
    bottom: 0;
}
于 2013-08-11T19:58:34.373 回答
1

如果您正在寻找一个简单的解决方案，您可以将页眉和页脚放置在页面顶部和底部的固定位置。

.header {
    position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    background: #eee;
}

.footer {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    background: #eee;
}

这是一个例子：

http://codepen.io/anon/pen/eCEca

或者，您可能想查看 jQuery Mobile 的持久导航栏之类的东西，它提供了您正在寻找的内容：http: //view.jquerymobile.com/1.3.2/dist/demos/widgets/fixed-toolbars/footer-坚持-a.html

于 2013-08-11T19:26:52.513 回答