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以澄清内容区域必须扩展到完整高度的意图。＆＃34; main＆＃34;的内容现在已被一个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

尝试使用calc()

<强> Working Example

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

或者你可以删除它并使用jQuery：

<强> Working Example 2

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

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

Answer 3

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

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

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

3 个答案: