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

我有一个固定高度的容器

容器有两段

我希望第一个

p

根据其内容具有动态高度（最小高度和最大高度），第二个p占据剩余的垂直空间

e、 g-in：我希望粉红色的p填充剩余的黄色空间，并在第一个p元素增长时相应收缩

我已经看到了如何让div填充水平空间（即使用

bfc

-块格式上下文），但我似乎找不到用于垂直填充的css解决方案

如果css不能做到这一点，我想知道如何用jquery做到这一点

---

谢谢。

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

.two
{
    background-color: pink;
    height: inherit;
}

---

如果您处理的是

背景色

，您可以使用jquery执行以下操作： 试试看：

完成。。。

---

祝你好运

事实上，做到这一点的方法是用

在第二个表格行上设置

height:100%

，使其占据“剩余高度”

加成

---

不，我对颜色不感兴趣-我只是用它们来更容易地解释我需要的东西不起作用，第二个div与父div的高度相同，因此两个div的高度之和都大于父div的高度。@MichaelAntonius:缓存你的选择器；您的第二个选择器不正确。按

p

进行过滤是不成功的，因为sizzle会从右向左进行选择器匹配<代码>变量$one=$（'.one'），剩余填充=$one.parent（）.height（）-$one.height（）$（'.two'）.css（'height'，fillreserving）

var fillRemaining = $("p.one").parent().height() - $("p.one").height();
$(".p.two").css('height',fillRemaining);

<div class="wrapper">
    <div class="one">
        text1
    </div>
    <div class="two">
        text2
    </div>
</div>

.wrapper
{
    height:200px;
    width: 200px;
    background-color: yellow;
    display: table;
}
.wrapper > div
{
    width: 100%;
    display: table-row;
}
.one
{
    min-height: 100px;
    max-height: 180px;
    background-color: beige;
    text-align: left;

}
.two
{
    background-color: pink;
    height: 100%;
}