Thanks for looking.

谢谢你看。

I am trying to make a very simple responsive HTML layout:

我正在尝试做一个非常简单的响应性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;
}

The end-product should be a page that has a 50px tall header anchored to the top of the screen and a 50px tall footer anchored to the bottom of the screen. In between, the "content" div should expand to fill the space between the header and footer no matter what the size of that space.

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

I have already checked out several tutorials on "sticky footers" and, unfortunately, they aren't quite what I am after as they do not account for the "content" div expanding to fill the space between header and footer.

我已经查阅了一些关于“粘贴页脚”的教程，不幸的是，它们并不是我想要的，因为它们没有考虑到“内容”div的扩展来填充页脚和页脚之间的空间。

This is a close example of what I am after, but this site is written in Flash:

这是我追求的一个很好的例子，但是这个网站是用Flash写的:

http://www.wearegolden.co.uk/

Try resizing your screen when you look at this.

当你看到这个时，试着调整你的屏幕大小。

What am I missing here? Thanks!

我错过了什么?谢谢!

SOLVED!

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;
}

THANKS!

谢谢!

3 个解决方案

#1

sounds like you need to just fix the header and footer.

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

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

The main body content will scroll between these fixed elements, if larger than the space.

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

note I believe its good practice to z-index in multiples of 10. This gives you the flexibility to slot an element into your stack if one is missed out.

注意，我认为它对z指数的良好实践是10倍的倍数。这使您可以灵活地将一个元素插入到堆栈中，如果一个元素被遗漏了。

#2

If you're looking for a simple solution, you can position the header and footer in a fixed position at the top and bottom of the page.

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

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

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

Here's an example:

这里有一个例子:

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

Alternatively, you may want to look into something like jQuery Mobile's persistent navbars, which offers what you're looking for: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/fixed-toolbars/footer-persist-a.html

或者，您可能想要查看jQuery Mobile的持久导航条，它提供了您想要的内容:http://view.jquerymobile.com/1.3.2/dist/demos/widgets/fix-toolbars/footer -persist-a.html。

#3

Yet another approach is to use absolute positioning (jsFiddle):

另一种方法是使用绝对定位(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;
}

#1