css - DIV 高度动态与滚动溢出

Question

我有一个包装器 div，其高度为页面的 100%，在包装器内我有一个动态数量的 div。我希望包装器 div 中的最后一个 div 填充剩余空间。

  html {
    height: 100%;
}
body {
    height: 100%;
}
#wrapper {
    height: 100%;
    width: 200px;
    border: solid 1px #FF0;
}
#wrapper .child {
    border: solid 1px #F00;
    height: 40px;
}
#wrapper .last {
    height: 100%;
    border: solid 1px #000;
}

正如您在示例中看到的：http: //jsfiddle.net/CCDHT/当我将最后一个 div 高度设置为 100% 时，它会溢出包装器 div。

这就是我想要实现的目标：

Answer 1

你可以加：

overflow:auto; 

到主 div。

你是这个意思吗？

http://jsfiddle.net/CCDHT/2/

Answer 2

http://jsfiddle.net/CCDHT/1/

环境

#wrapper {
    overflow:auto;
...

达到您的预期输出。

Answer 3

将其设置为inline-blockwithoverflow:scroll;并删除height.

#wrapper{

    display:inline-block;
    overflow:scroll;

}

inline-block占用它需要的所有空间（尽可能多）。

Answer 4

我通常使用一个简单的jQuery函数来运行页面初始化来获得这种功能：

function set_div_height() {

    el_height = (
        ($(window).height()) - ($('.div1').height() + $('.div2').height())
    );
    $('.div3').height(el_height); 

}

Answer 5

您将不得不动态地执行此操作，因为您想在不同的屏幕之间进行调整。我会用 jQuery 来实现这一点。注意正文边距和边框。

html, body {
    padding: 0;
    margin: 0;
    height:100%;
}

  $(document).ready(function () {
      div3_height = $(window).height() - ($(".child").outerHeight(true) * 2);
      $("#wrapper .last").css("height", div3_height - 4);
  });

http://jsfiddle.net/djwave28/CCDHT/5/

Answer 6

你描述的清楚地看起来像一个<table>. 您可以尝试模仿它：

1. 添加display: table;到#wrapper
2. 添加display: table-row;到#wrapper div

http://jsfiddle.net/WCx4P/1/

该解决方案的缺点是：

• 最后一个 div 必须有内容
• 你不能#wrapper div直接使用所有的边框

这是一个令人讨厌的解决方案，但我现在唯一能想到的。

我宁愿看一下您尝试实现的确切设计，并为您的问题找到更好的解决方法。