html - 自动高度 div 溢出并在需要时滚动

Question

我正在尝试制作一个页面没有垂直滚动的网站，但我需要其中一个 DIV，我必须垂直扩展到页面底部(最多)，并且当它有内容时不适合，div 应该创建一个垂直滚动条。

我已经有了在 this fiddle 中计算出的 div 的 内部 的 css ，在需要时创建滚动条。我也想通了how to make容器 div 增长以完全占据它在页面中的垂直空间。我就是不能让他们一起锻炼!

请记住，在 jsfiddle 中，您将无法查看整个网站的内容，从这个意义上说，您从第二个 fiddle 中获得的内容并没有真正显示正在完成的工作，但它按我的预期工作虽然。

只是另一个注意事项:因为它们是不同的 fiddle ，第一个 fiddle 中的 id#container div 是第二个示例的 id#dcontent div。

还有一件事:对于一种类型的内容，此 div 将垂直滚动，但对于其他类型的内容，我希望它水平滚动，因为它将有一个产品“ slider ”在该 DIV 内水平显示元素.

请同时查看这张照片，因为它可能更容易理解我想说的内容:PICTURE

我尝试寻找有关这些主题的其他问题，但似乎没有一个涵盖我试图解决的所有方面...:S

如果我可以提供其他东西来帮助您/我 :) 弄明白了，请告诉我!

谢谢!

EDIT1:修复拼写错误

EDIT2:添加图片进行解释

Answer 1

我很惊讶还没有人提到 calc()。

我无法从你的 fiddle 中找出你的具体情况，但我理解你的问题:你想要一个仍然可以使用 overflow-y 的 height: 100% 容器: 自动。

这不是开箱即用的，因为 overflow 需要一些硬编码的大小约束来知道何时应该开始处理溢出。因此，如果您使用 height: 100px，它会按预期工作。

好消息是that calc() can help ，但它并不像 height: 100% 那样简单。

calc() 可让您组合任意度量单位。

因此，对于您在图片中描述的情况，您包括:

由于粉色 div 上方和下方的所有元素的高度都是已知的(假设总高度为 200px)，您可以使用 calc 来确定高度小指的:

高度:计算(100vh - 200px)；

或者，“高度是 View 高度的 100% 减去 200 像素。”

然后，overflow-y: auto 应该可以正常工作。