0 
//// html ////

<body>
    <div class="page">
        <div class="menu"> menu </div>
        <div class="content"> {% block content %}{% endblock %}</div>
        <div class="footer"> footer </div> 
    </div>
</body>


//// css ////

html, body {
background: black;
height: 100%;
margin: 0;

}

.page {
min-height: 100%;
position: relative;
}

.menu {
background: #ff0000;
height: 100px;
}

.content {
padding-bottom: 75px;
background: #00ff00;
}

.footer {
position: absolute;
width: 100%;
bottom: 0;
height: 75px;
background: #0000ff;
}

输出：

在此处输入图像描述

我会给你一个 jsFiddle 的链接，但它不能正常工作（与我的浏览器中的不同） - http://jsfiddle.net/t3Gjx/3/ 我需要摆脱黑色差距，无论如何long 是绿色字段（内容字段）中的内容。我正在尝试

min-height = 100%

在 .content 但没有成功。

4

3 回答 3

3

你可以这样做：

http://jsfiddle.net/t3Gjx/10/

html, body {
    background: black;
    height: 100%;

}

.page {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -75px; /* the bottom margin is the negative value of the footer's height */
}

.menu {
    background: #ff0000;
    height: 100px;
    position: relative;
    z-index: 555;
}

.content {
    background: #00ff00;
    margin: -100px 0 -75px;
    min-height: 100%;
    height: auto !important;
    height: 100%; 
}

.content:before {
    content: "";
    display: block;
    height: 100px;
    width: 100%;
}

.content:after {
    content: "";
    display: block;
    height: 75px;
    width: 100%;
}

.footer {
    width: 100%;
    height: 75px;
    background: #0000ff;
}

解释：

这使用了以下概述的技术：http ://ryanfait.com/resources/footer-stick-to-bottom-of-page/

您使 .page 的高度为 100%，并在底部设置一个负边距，以便页脚折叠成。这可确保网站的高度不是 100% + 页脚的高度。内容使用前后块，加上负边距使自身高度为 100%，减去菜单和页脚。

于 2013-07-15T15:03:14.643 回答
0

EDIT3我为所有的编辑道歉。@Axel 的 jsfiddle 的最终编辑。我认为这是最好的：http: //codepen.io/k/pen/qJwez。

我添加 position:relative; z-index: 999;到页脚和

z-index: 998;对内容和

margin:0到 html，正文。

并将页脚移动到 html 中的页面元素中。

关于@Axel 的回答：如果您有很多内容，它会溢出页脚。我将此添加到他的http://jsfiddle.net/t3Gjx/10/ ：

position:relative; z-index: 999;到页脚和

z-index: 998;对内容和

'溢出：自动'到页面。

以防止这种情况发生。页脚仍停留在底部，菜单和内容滚动。

编辑：添加了对页面元素的修改

EDIT2：另外，经过上述修改，如果将页脚元素移动到 html 中的页面元素中，所有内容都应该滚动，包括页脚。

于 2013-07-15T15:24:56.623 回答
0

在此处输入图像描述

<!doctype html>
<html lang="fr-FR">
<head>
    <meta charset="UTF-8" />
    <title>Menu/Content/Status</title>
    <style>
    #menu-bar {
        display         : block;
        position        : absolute;
        left            : 0;
        top             : 0;
        right           : 0;
        height          : 30px;
        margin          : 2px;
        padding         : 2px;
        border          : 1px solid darkgray;
        background-color: whitesmoke;
    }
    #status-bar {
        display         : block;
        position        : absolute;
        left            : 0;
        bottom          : 0;
        right           : 0;
        height          : 30px;
        margin          : 2px;
        padding         : 2px;
        border          : 1px solid darkgray;
        background-color: whitesmoke;
    }
    #content {
        display         : block;
        position        : absolute;
        left            : 0;
        top             : 38px;
        bottom          : 38px;
        right           : 0;
        margin          : 2px;
        padding         : 2px;
        border          : 1px solid darkgray;
        background-color: whitesmoke;
    }
    </style>
</head>
<body>
    <div id="menu-bar"  >Menu bar</div>
    <div id="status-bar">Status bar</div>
    <div id="content"   >Content</div>
</body>
</html>
于 2016-06-06T14:03:19.243 回答