填充剩余垂直空间的第二个元素

Dan*_*eld 3 html css jquery

我有一个固定高度的容器.

容器有2个段落.

我希望第一个p具有动态高度(具有最小高度和最大高度),具体取决于它的内容,第二个p用于占用剩余的垂直空间.

例如,在这个小提琴中:我希望粉红色的p填充剩余的黄色空间,并在第一个p元素生长时相应地缩小.

我已经看到了如何让一个div填补水平空间(即用bfc-块格式化上下文中),但我似乎无法找到一个垂直填料的CSS的解决方案.

如果用css无法做到这一点我想知道如何用jquery做到这一点.

谢谢.

Din*_*ani 7

你可以像这样使用第二个粉色div

.two
{
    background-color: pink;
    height: inherit;
}
Run Code Online (Sandbox Code Playgroud)

看到这个小提琴

  • 不起作用,第二个div获得与父级相同的高度,因此div的高度之和大于父级的高度. (3认同)