css - 仅使用 CSS 使页面的主要部分填充剩余高度

Question

我有两个 div，如下所示：

<div class="header">
    <h1>My Cool Site</h1>
</div>

<div class="main">
    Hello world
</div>

标题 div 应该占用它需要的尽可能多的空间。主 div 应完全填充剩余的页面高度 - 不应出现滚动条。这可能只与CSS有关吗？没有 JavaScript。这是我这样做的失败尝试：http: //jsfiddle.net/nareshbhatia/HrsHR/

编辑： 我稍微更改了 jsFiddle 以阐明内容区域必须扩展到全高的意图。"main" 的内容现在已被一个 SVG 元素取代，该元素延伸到 div 的整个区域。

Answer 1

试试这个解决方案。这会将您的 div 置于底部。

.main {
   background-color: #BAA378;
   border: 10px solid #453823;
   padding: 10px;
   height: 86%;
   position:fixed;
   bottom: 0;
   width: 100%;
}

http://jsfiddle.net/DCM8E/

Answer 2

您可以通过使用包装器来创建边框而不是您的内容来创建所需的外观。然后你的内容 div 不会占据整个高度，而是出现在标题下方的正常位置，并被修剪到高度overflow: hidden;。将标题放在包装边框上有点作弊，至少在外观方面你有你需要的东西。

http://jsfiddle.net/AjtFc/3/

Answer 3

尝试使用calc()

工作示例

.main {
    background-color: #BAA378;
    border: 10px solid #453823;
    padding: 10px;
    height: calc(100% - 60px); /* 100% - height of header */
}

或者你可以放弃它并使用 jQuery：

工作示例 2

 layout = (function () {
     var w = $(window).height();
     var h = $('.header').outerHeight();
     var x = w - h;
     $('.main').outerHeight(x);
 });

 $(document).ready(layout);
 $(window).resize(layout);