如何让 DIV 占据页面的其余部分？答案

【问题标题】：How to make a DIV take up the remainder of the page?如何让 DIV 占据页面的其余部分？
【发布时间】：2012-11-14 21:25:54
【问题描述】：

我有以下 HTML：

<html>
<body>
  <h2>Title</h2>
  <div id='large_div'>
    blah.. blah.. blah..
  </div>
</body>
</html>

如何让large_div 占据页面高度的其余部分？

这是页面的 CSS：

html { height: 100%; }
body { height: 100%; }
#large_div {
    /* ??? */
}

【问题讨论】：

标签： css html height

【解决方案1】：

您可以尝试在#large_div 上设置一个等于h2 高度的负边距。不幸的是，这不是很可靠的代码，因为 h2 高度会根据文本长度和浏览器而变化：

#large_div {
    height: 100%;
    margin-top: -1em; /* adjust to height of h2 */
}

一点 jQuery 可以帮你解决问题：

$(document).ready(function(){
    $('#large_div').css({height: $(window).height() - $('h2').height()});
});

【讨论】：

【解决方案2】：

那么，您基本上想要一个表格布局？这是 CSS 中最讨厌的事情之一。您可能会考虑回退到老式的 HTML 表格，但如果您不关心 IE6/7 support，那么您也可以使用 table、table-row 和最终 table-cell 的 display 属性。

这是一个 SSCCE，复制并粘贴并运行它。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3323454</title>
        <style>
            html { 
                height: 100%;
            }
            body { 
                display: table; 
                margin: 0;
                width: 100%;
                height: 100%;
            }
            #large_div {
                display: table-row; 
                width: 100%;
                height: 100%;
                background: pink;
            }
        </style>
    </head>
    <body>
        <h2>Title</h2>
        <div id="large_div">blah.. blah.. blah..</div>
    </body>
</html>

同样，这仅适用于体面的 CSS2 浏览器。

如果您只想为 div 提供漂亮的背景，那么还有更好的解决方案。

【讨论】：

【解决方案3】：

如果您知道顶部 div（在本例中为 h2）的高度，您可以尝试以下方法：

#topdiv { height:100px; }
#bottomdiv { height:100%; margin-bottom:-100px; bottom:0; }

不幸的是，我无法从我现在的位置对此进行测试，所以这可能还有一段距离......但我相信我之前使用过类似的东西并且它有类似的效果。

您可以通过使用这些 css 属性找到您的解决方案 - 或者至少是一个“足够好”的解决方案...

祝你好运！

【讨论】：

【解决方案4】：

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

#large_div {height:100%;margin:0px;}

【讨论】：

这将使 DIV 的高度为其父级的 100%。由于父级也有一个
，这将导致页面展开到大于窗口高度的 100%。
应该在上下文中给出整个页面，不，div 将占据 100% 的高度，并且 html 和 body 标签的高度、边距和填充不会通过添加干扰如果您不希望 div 占据页面的 100%，请改为 html,body {height:100%;}
我不太确定我明白你在说什么，但我的意思是，如果 DIV 的高度为 100%，它将与页。由于页面中已经有一个 H2，这会将页面扩展为大于 100% 的窗口。
乔治是对的。高度将相对于父元素，无论其中已经存在哪些兄弟元素。自己运行它并亲眼看看。

，这将导致页面展开到大于窗口高度的 100%。