html - div A 固定高度，div B 下面调整到窗口

Question

我有一个标题和一个内容 div。标题高度是固定的，内容 div 我想调整到窗口高度，但如果它的内容超过窗口高度，则内容 div 应该有 y 滚动条。

jsfiddle

HTML

<div class="top"></div>
<div class="bottom">

      Lorem ipsum dolor sit amet....
</div>

CSS

.top{
    height:100px;
    width: 100%;
    background-color: grey;
}

.bottom{
    min-height:100px;
    width: 100%;
    overflow-y: scroll;
    background-color: red;
}

Answer 1

这要么是需要，要么是display: table;一个新的 CSS3 功能 - calc().

你需要支持什么？如果只是新浏览器，你可以试试这个：

.bottom {
  height: calc(100% - 100px);
}

演示

Answer 2

使用 calc() - http://html5please.com/#calc

100px 是您的顶栏

height: 100%; /** older browsers **/
max-height: 100%; /** older browsers **/
max-height: -webkit-calc(100% - 100x); /** Chrome / Safari 6 **/
max-height: -moz-calc(100% - 100px); /** FF 4-15  **/
max-height: calc(100% - 100px); /** FF 16+, IE 9+, and future other browsers **/
overflow-y: scroll;

Answer 3

<div class="top"></div>
<div style="overflow:auto;height:100%;position:absolute;">
<div class="bottom">

      Lorem ipsum dolor sit amet....
</div>
</div>

.top{
height:100px;
width: 100%;
background-color: grey;


}

.bottom{
    min-height:100px;
    width: 100%;
    overflow-y: scroll;
    background-color: red;

}

Answer 4

添加position:absolute和类max-height:100%，.bottom

然后改变的类将是

.bottom{
min-height:100px;
width: 100%;
overflow-y: scroll;
background-color: red;
position:absolute;
max-height:100%;
}

Answer 5

如果内容超出窗口大小，将自动添加滚动条。要将内容高度添加到窗口高度，请尝试使用 javascript 获取窗口大小并将其设置在页面的 onload 方法中，而不是在 css 中设置。

Answer 6

为了满足您的要求，我们需要使用 jQuery。

像这样。

$(document).ready(function(){

   var height = $(window).height() - $(".top").height();
   $('.bottom').css('height', height+'px');

});

jsFiddle 文件