使DIV垂直填充页面的其余部分？答案

【问题标题】：Make DIV fill remainder of page vertically?使DIV垂直填充页面的其余部分？
【发布时间】：2010-05-24 15:47:44
【问题描述】：

我有一个占据大部分页面的 Google 地图应用。但是，我需要为菜单栏保留最顶部的空间。如何让地图 div 自动填充其垂直空间？ height: 100% 不起作用，因为顶部栏会将地图推过页面底部。

+--------------------------------+
|      top bar  (n units tall)   |
|================================|
|              ^                 |
|              |                 |
|             div                |
|     (100%-n units tall)        |
|              |                 |
|              v                 |
+--------------------------------+

【问题讨论】：

如果 x = 10%，则放 div{height:90%}
底部div需要动态调整大小。

标签： css html

【解决方案1】：

你可以使用绝对定位。

HTML

<div id="content">
    <div id="header">
        Header
    </div>
    This is where the content starts.
</div>

CSS

BODY
{
    margin: 0;
    padding: 0;
}
#content
{
    border: 3px solid #971111;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #DDD;
    padding-top: 85px;
}
#header
{
    border: 2px solid #279895;
    background-color: #FFF;
    height: 75px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

通过绝对定位 #content 并指定 top、right、bottom 和 left 属性，您将获得一个占据整个视口的 div。

然后将#content 上的padding-top 设置为>= #header 的高度。

最后，将#header 放在#content 中并绝对定位（指定顶部、左侧、右侧和高度）。

我不确定这对浏览器有多友好。请查看 this article at A List Apart 了解更多信息。

【讨论】：

有趣，我不知道这个技巧。不过，您应该提到它在 IE6 中不起作用。
我做到了。粗体字。阅读我引用的文章 - 它解释了 IE6 的解决方法 =)
但这需要你硬编码标题的高度，对吧？
这应该是公认的答案，它仅使用 CSS 正确定位。浏览器兼容性可能不是最好的，但它是我们所拥有的最好的。像这样的简单布局需要 javascript 绝对没有意义。
@Manticore - 我认为表格、flexbox 或 JS 是您唯一的选择。

【解决方案2】：

显然，这样做的方法是使用 JavaScript 来监视 onload 和 onresize 事件，并以编程方式调整填充 div 的大小，如下所示：

使用 jQuery：

function resize() {
    $("#bottom").height($(document).height() - $('#top').height());
}

使用纯 JavaScript：

function resize() {
    document.getElementById("bottom").style.height = (document.body.clientHeight - headerHeight) + "px";
}

编辑：然后将它们绑定到window 对象。

【讨论】：

调整大小不起作用：stackoverflow.com/questions/229010/…

【解决方案3】：

另一个未给出的解决方案使用 CSS3 而不是 javascript。现在有一个 calc() 函数可以用来做同样的事情：

HTML

<div id="content">
    <div id="header">
        Header
    </div>
    <div id="bottom">
        Bottom
    </div>
</div>

CSS3

#content {
    height: 300px;
    border-style: solid;
    border-color: blue;
    box-sizing: border-box;
}
#header {
    background-color: red;
    height: 30px;
}
#bottom {
    height: calc(100% - 30px);
    background-color: green;
}

这里是jsfiddle

您可能还想考虑对内部 div 使用 box-sizing: border-box 样式，因为这可以消除父 div 之外的填充和边框问题。

【讨论】：

#header的高度不固定为30px怎么办？
calc() 超级有用！

【解决方案4】：

如果你calculate the page position of the div element 你可以不知道标题元素：

function resize() {
    var el = $("#bottom");
    el.height($(document).height() - el.offset().top);
}

【讨论】：

【解决方案5】：

我推荐你试试jquery-layout 插件。您将在链接上看到一堆演示和示例。

我不知道您是否熟悉 JQuery 或其他一些 Javascript 辅助框架的概念，例如 Prototype.js 或 Mootools，但使用其中一个是一个至关重要的想法。它们对程序员隐藏了大多数与浏览器相关的技巧，并且它们为 UI、DOM 操作等提供了许多有用的扩展。

【讨论】：

我同意！让 jquery 为您处理。

【解决方案6】：

var sizeFooter = function(){
    $(".webfooter").css("padding-bottom", "0px").css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

【讨论】：