div中带有固定大小的div中的滚动条

Question

div中带有固定大小的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">
        some more content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content
      </div>
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

tmj*_*jam 5

使用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>

Run Code Online (Sandbox Code Playgroud)

在document.ready中添加此

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，9 月前
查看次数：	26547 次
最近记录：	14 年，9 月前