logo标签列表

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

htmlcss
9

我的布局基本上是这样的：

<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从不显示滚动条，只是使用它所需的空间，即使这会超出父容器的总高度... 更新： 请测试您提供的解决方案 :-)
你需要支持哪些浏览器？IE7？还是只需要支持现代浏览器？ - thirtydot
@thirtydot：IE7是我应该支持的最老版本。但如果不可能的话，我可能会考虑忽略IE7 :-) - Daniel Hilgarth
5个回答
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>

在document.ready中添加以下代码：
 var h1=$('#c1').height();
var h2 = 150-h1;
$('#c2').height(h2);
1

也将第二个 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>

这并不是有帮助的。我想让第二个 div 使用父 div 中所有可用的空间。使用这个 max-height 设置，如果第一个 div 是空的，它将不会使用它的空间。 - Daniel Hilgarth
在这种情况下，您可以为第二个div设置最大高度为150像素。 - tmjam
1

我只知道如何使用即将推出的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>
嗯，我需要一个跨浏览器的解决方案，仅支持 Firefox 是行不通的。 - Daniel Hilgarth
0

我认为没有一种灵活的方法可以做到这一点，但如果您可以知道/设置原始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和max-height都设置为100px，则该div将填充剩余空间，并在内容大于max-height时显示滚动条。

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

你的方法的主要问题不是它没有从父元素中获取高度，而是它不能按照我想要的方式工作！第二个 div 没有使用其父元素内所有可用的空间。 - Daniel Hilgarth
如果父级 div 的宽度为 200 像素，第一个子 div 的宽度为 100 像素，则第二个子 div 将使用剩余的 100 像素。这样不是吗？ - Charlie
第二个 div 将使用最大 100px，无论第一个 div 的高度如何。即使它的高度为 0，因为它是空的... 这就是为什么第一个 div 具有 max-height 而不是 height。 - Daniel Hilgarth
是的，我在我的答案中说过了。我认为没有一种纯CSS的方法可以做到这一点，特别是跨浏览器的情况下。 - Charlie
0

如果你在子元素上设置 overflow-y: scroll; 和 height: auto; 那么你应该能够实现滚动条效果，而不超出父元素

这并没有帮助。它仍然扩展，只是显示一个禁用的滚动条。 - Daniel Hilgarth
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接