Question

我有一个简单的布局，我在父Div中有两个Div。 [See this.] 我想要实现的是，第一个子div必须占用容器中的所有可用空间[有或没有内容]，强制在父Div底部的页脚。只要这必须起作用。因此，当主容器调整大小时，第一个子div仍占用可用空间，而页脚必须保留在父Div的底部。

我到目前为止尝试的是将position: absolute; bottom: 0;设为页脚，是的，页脚会粘在底部，但第一个子{div} (.content)不会占用剩余的空格。

有可能吗？请帮忙。感谢。

HTML：

<div class='main'>
    <div class='content'>My Canvas Container</div>
    <div class='footer'>Footer</div>
</div>

CSS：

.main {
    height: 500px;
    background: #000;
}
.content {
    padding: 5px 10px;
    background: #fff;
    border: red solid 1px;
}
.footer {
    padding: 5px 10px;
    text-align: center;
    background: #eee;
}

.content,
.footer {
    display: block;
}

Answer 1

并非每个人的回答都考虑了您的请求，即解决方案是响应式的（我假设您的意思是可扩展）。如果页脚的高度可以变化，那么解决方案很简单：

.main {
   height: 500px;
   position: relative;
}
.content {
   height: 90%;
}
.footer {
   bottom: 0;
   height: 10%;
   position: absolute;
   width: 100%;
}

如果页脚必须是固定高度，解决方案仍然非常简单，但不再具有出色的浏览器支持：

.main {
   height: 500px;
   position: relative;
}
.content {
   height: calc(100% - 50px);
}
.footer {
   bottom: 0;
   height: 50px;
   position: absolute;
   width: 100%;
}

注意：Content-Box（默认元素大小调整方法）将边距等内容添加到您指定的大小。如果您以像素为单位表示大小，那只是一个小麻烦 - 您只需从您指定的大小中减去边框/边距/等。如果你使用百分比来反应性地构建......那就太乱了。您需要应用Border-Box，它会从您规定的尺寸中提取边距等内容。

* {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

Answer 2

请检查这个小提琴和代码：http://jsfiddle.net/Luncqwn3/1/

<强> CSS：

   .main {
    height: 500px;
    background: #000;
    position:relative;
}
.content {
    padding: 5px 10px;
    background: #fff;
    border: red solid 1px;
    min-height:92%;

}
.footer {
    padding: 5px 10px;
    text-align: center;
    background: #eee;
    position:absolute;
    bottom:0;
}

.content,
.footer {
    display: block;
}

我已将页脚position:absolute设置为父容器relative，并为min-height设置了content container。

您可以参考这些文章：Keeping footer at the bottom of the page

Footer at the bottom of the page

Answer 3

<强> DEMO

我使用假表布局技术使用display: table，table-cell＆amp; table-row

<强>代码：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.main {
    background: #000;
    display: table;
    width: 100%;
    height: 100%;
}
.content-wrap, .footer-wrap {
    display:table-row;
}
.content, .footer {
    display: table-cell;
}
.content {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 5px 10px;
    background: #fff;
    border: red solid 1px;
    height: 100%;
}
.footer {
    padding: 5px 10px;
    text-align: center;
    background: #eee;
}

Answer 4

我已经更新了小提琴。检查答案并告诉我这是我的预期你的权利？

.content {
    padding: 5px 10px;
    background: #fff;
    border: red solid 1px;
    min-height:200px;
}

Fiddle

为容器指定最小高度以使其响应。你可以通过max-height限制它。我已经为你提供了我从你的问题中理解的答案。如果这不是您的预期，请更清楚地解释。

Answer 5

如何在.content中添加高度，并通过设置高度的px将页脚准确地强制到想要的位置？

如下所示：

.content {
    height:450px;
    padding: 5px 10px;
    background: #fff;
    border: red solid 1px;

Answer 6

<强> Demo

您需要指定父div的位置，只需将position: relative添加到父div，将position: absolute;添加到子页脚bottom:0;，然后将其设为100％width add {{ 1}} left:0;

CSS

right: 0;

<强> Edited Demo

CSS

body, html {
    height: 100%;
    margin:0;
    padding:0;
}

.main {
    height: 500px;
    background: #000;
    position: relative; /* add this */
}
.content {
    padding: 5px 10px;
    background: #fff;
    border: red solid 1px;
}
.footer {
    padding: 5px 10px;
    text-align: center;
    background: #eee;
    position: absolute; /* add this */
    bottom:0; /* add this */
    left:0; /* add this */
    right:0; /* add this */
}
/* div is by default block element so you don't need this below */
/* .content,
.footer {
    display: block;
} */

在父Div的底部推脚

6 个答案: