html – 子DIV用可滚动内容填充剩余高度

概述我正在尝试设置菜单div A,其下方有一个内容容器div B.它们都嵌套在父div中.当div B中的内容高于div B本身时,滚动条需要出现在div B上. . 我遇到的主要问题是div A有一个未知的高度,随着内容在运行时通过JavaScript添加和删除,我可以随时更改,我希望div B填充剩余的父高,同时保持其可滚动性内容. 我正在寻找一个只有CSS的解决方案,因为我正在研究的应用程序已经 我正在尝试设置菜单div A,其下方有一个内容容器div B.它们都嵌套在父div中.当div B中的内容高于div B本身时,滚动条需要出现在div B上.

.

我遇到的主要问题是div A有一个未知的高度,随着内容在运行时通过JavaScript添加和删除,我可以随时更改,我希望div B填充剩余的父高,同时保持其可滚动性内容.

我正在寻找一个只有CSS的解决方案,因为我正在研究的应用程序已经Js很重,我希望避免增加更多的膨胀.

我的问题的简化版本：
https://jsfiddle.net/uf3frdjv/

解决方法 使用flexBox可以解决您的问题.

一个简单的例子：

.C {  display: flex; /* this enables flex layout */  flex-direction: column; /* child divs are placed in column */}.A {  flex: 0 0 auto; /* div A should remain its original height (neither expand nor shrink) */}.B {  flex: 1 1 auto; /* div B should fit the remaining space */  overflow-y: auto; /* enable scroll bar when div D exceeds div B's height */}

有关实例,请参阅此fiddle

总结

以上是内存溢出为你收集整理的html – 子DIV用可滚动内容填充剩余高度全部内容，希望文章能够帮你解决html – 子DIV用可滚动内容填充剩余高度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。