Question

我基本上有这样的布局：

<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从不显示滚动条，只是使用它所需的空间，即使它会超过父母的总高度...

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

Answer 1

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

Answer 2

将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>

Answer 3

我只知道如何使用即将推出的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>

Answer 4

如果你设定 overflow-y：scroll; 和身高：自动; 在子元素上，您应该能够在不超出父元素的情况下实现滚动条效果

Answer 5

我认为没有办法灵活地做到这一点，但如果你能知道/设置原始div的高度然后接下来的两个div，就有可能。

以下是我提出的建议：

<body>
    <div style="height:200px; 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; min-height:100px; max-height:100px;">
        some more content<br/>
        some content<br/>
        some more content<br/>
        some content<br/>
      </div>
    </div>
</body>

如果原始div为200px，然后第一个子div为100px，则第二个子div的剩余空间将为100px。因此，如果您将每个min-height and max-height设置为100px，则div将填充剩余空间，并在内容大于max-height时显示滚动条。

我确定你想要一个灵活的答案，这取决于原始父div的大小，但在这种情况下我不认为这很容易。

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

5 个答案: