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

我有两个div，如下所示：

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

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

我的酷网站
你好，世界

header div应该占用所需的空间。主div应该正好填充剩余的页面高度-不应该出现滚动条。这是否仅适用于CSS？没有JavaScript。以下是我在这方面的失败尝试：

编辑：

---

我稍微修改了JSFIDLE，以澄清内容区域必须扩展到全高的意图。“main”的内容现在已经被一个SVG元素所取代，它可以延伸到div的整个区域。

试试这个解决方案。这将使您的div位于底部

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

尝试使用

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

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

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

或者，您可以删除该选项并使用jQuery：

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

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

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

---

通过使用包装器来创建边框而不是内容，可以创建所需的外观。然后，您的内容div不会占据整个高度，而是显示在标题下方的正常位置，并通过

overflow:hidden修剪到高度。将标题放在包装器边框上有点作弊，至少在外观方面你有你需要的东西

溢出：隐藏在主体上突然切断主体部分（您看不到底部边框）。所以这个解决方案不起作用。不幸的是，这个解决方案也不起作用。页眉和主页眉之间有一个间隙，随着窗口大小的改变而改变。感谢您向我介绍calc（）。它起作用了！因为这是一个实验性的特性，所以我不会在生产代码中使用它，但仍然很有趣！似乎没有防弹CSS解决方案，所以我倾向于使用JS。是的，您的第二个示例是我实现的，因为它将在更多浏览器中工作。虽然第一个例子不会在所有浏览器中都适用，但我认为您的答案是正确的，因为“从技术上讲”它是一个仅使用CSS的解决方案！很有创意！肯定学到了一种新技术。然而，正如你所说的，这是一个小欺骗，因为内容没有占据全部高度。我对JSFIDLE做了一些修改，以充分利用内容区域的整个高度，以便明确目的。再次感谢你这么有创意的回答。