DIV高度动态，滚动溢出-Java 学习之路

我有一个包装器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 .

这就是我想要实现的目标：
enter image description here

6 回答

0
您所描述的内容看起来像 <table> . 您可以尝试模拟它：
- 将 display: table; 添加到 #wrapper
- 将 display: table-row; 添加到 #wrapper div
http://jsfiddle.net/WCx4P/1/

这个解决方案的缺点是：
- last div必须有内容
- 你不能直接在所有 #wrapper div 上使用边框
这是一个讨厌的解决方案，但我现在唯一能想到的解决方案 .

我宁愿看看你想要实现的确切设计，并为你的问题找到更好的解决方法 .
回复于 2024-04-18T18:42:10+08:00
0
你可以加：
```
overflow:auto;
```
到主要的div .

你是这个意思吗？

http://jsfiddle.net/CCDHT/2/
回复于 2024-04-18T18:42:10+08:00
0
http://jsfiddle.net/CCDHT/1/

设置
```
#wrapper {
    overflow:auto;
...
```
达到您的预期产量 .
回复于 2024-04-18T18:42:10+08:00
0
使用 overflow:scroll; 将其设置为 inline-block 并删除 height .
```
#wrapper{

    display:inline-block;
    overflow:scroll;

}
```
inline-block 占用了它所需的所有空间（尽可能多） .
回复于 2024-04-18T18:42:10+08:00

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

function set_div_height() {

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

}

回复于 2024-04-18T18:42:10+08:00

您必须动态地执行此操作，因为您希望在不同的屏幕之间进行调整 . 我希望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/

回复于 2024-04-18T18:42:10+08:00

DIV高度动态，滚动溢出

6 回答

相关问题