div与固定大小的div中的滚动条

2018-06-19 22:27:16

我基本上有这样的布局：

<body>
    <div style="height: 150px; width: 200px; background: green">
      <div style="overflow: auto; max-height: 100px; background: blue">
        some content <br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content
      </div>
      <div style="overflow: auto; background: red">
        some more content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content
      </div>
    </div>
</body>

现在，我需要第二个div来填充父div的所有剩余高度，并在需要更多空间时显示滚动条。我怎样才能做到这一点？目前，第二个div从不显示滚动条，只使用它所需的空间，即使这会超过父母的总高度。

更新：
请测试您提供的解决方案:-)

使用Jquery可能会有所帮助

<body>
<div style="height: 150px; width: 200px; background: green">
  <div id="c1" style="overflow: auto; max-height: 100px; background: blue">
    some content <br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
  <div id="c2"style="overflow: auto; background: red">
    some more content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
</div>

在document.ready中添加这个

 var h1=$('#c1').height();
var h2 = 150-h1;
$('#c2').height(h2);

将max-height设置为第二个div

<body>
<div style="height: 150px; width: 200px; background: green">
  <div style="overflow: auto; max-height: 100px; background: blue">
    some content <br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
  <div style="overflow: auto; background: red; max-height: 50px">
    some more content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
</div>

我只知道如何使用即将推出的flexbox布局模型。这是你在Firefox的当前版本中如何做到的：

<div style="height: 150px; width: 200px; display: -moz-box; -moz-box-orient: vertical; background-color: green;">
  <div style="overflow: auto; min-height: 1px; max-height: 100px; background-color: blue;">
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
  <div style="overflow: auto; min-height: 1px; -moz-box-flex: 1; background-color: red;">
    some more content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
</div>

链接地址: http://www.djcxy.com/p/56087.html

上一篇: divs with scrollbars in div with fixed size

下一篇: Why is a SVN dump of a single revision larger than a full dump?