Question

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

输出：

enter image description here

我会给你一个jsFiddle的链接，但它无法正常工作（与我的浏览器不同） - http://jsfiddle.net/t3Gjx/3/ 无论绿色领域（内容领域）的内容有多长，我都需要摆脱黑色空白。我正在尝试

min-height = 100%

<。> in .content但没有成功。

Answer 1

你可以这样做：

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％的高度减去菜单和页脚。

Answer 2

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

我补充说页脚position:relative; z-index: 999;和

z-index: 998;内容和

margin:0改为html，正文。

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

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

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

z-index: 998;内容和

'溢出：自动'到页面。

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

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

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

Answer 3

<!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>

如何使这个内容div 100％的可用高度？

3 个答案: