子DIV使用可滚动内容填充剩余高度 [英] Child DIV fill remaining height with scrollable content

问题描述

我正在尝试设置一个菜单 div A ，并在其下方放置一个内容容器 div B 。它们都嵌套在父 div C 内。当 div B 中的内容高于 div B 本身时，需要在<$ c $上显示滚动条。 c> div B 。

。

我遇到的主要问题是 div A 的高度未知，可以随内容随时变化是在运行时通过JavaScript添加和删除的，我希望 div B 填充剩余的父级高度，同时保持其内容的可滚动性。

我正在寻找仅CSS的解决方案，因为我正在处理的应用程序已经JS繁重，所以我希望避免增加更多的膨胀。

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

解决方案

使用flexbox可以解决您的问题。 / p>

一个简单的示例：

  .C {
 display ： 柔性; / *这将启用Flex布局* / 
 flex-direction：column; / *子div放在列中* / 
高度：300px； / *父容器必须具有固定的高度* / 
} 
 .A {
 flex：0 0 auto; / * div A应该保持其原始高度（既不扩展也不收缩）* / 
} 
 .B {
 flex：1 1 auto; / * div B应该适合剩余空间* / 
overflow-y：auto; / *当div D超过div B的高度时启用滚动条* / 
} 
  

实时示例，请参见此小提琴

I'm trying to set-up a menu div A with a content container div B below it. They are both nested inside a parent div C. When the content inside div B is higher than div B itself then a scroll bar needs to appear on div B.

.

The main problem that I'm having is div A has an unknown height and can change at any time as content is added and removed at run-time via JavaScript and I would like div B to fill the remaining parent height while maintaining scrollability of its content.

I'm looking for a CSS only solution as the application I'm working on is already JS heavy and I wish to avoid adding more bloat.

A simplified version of my problem: https://jsfiddle.net/uf3frdjv/

解决方案

Using flexbox can solve your problem.

A simple example:

.C {
  display: flex; /* this enables flex layout */
  flex-direction: column; /* child divs are placed in column */
  height: 300px; /* Parent container must have a fixed height */
}
.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 */
}

For a live example, see this fiddle

这篇关于子DIV使用可滚动内容填充剩余高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！