Question

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

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);
}

DEMO

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 File

div一个固定的高度，div B以下调整到窗口

6 个答案: