Question

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

容器有2个段落。

我希望第一个p具有动态高度（具有最小高度和最大高度），具体取决于其内容，第二个p用于占用剩余的垂直空间。

例如在this fiddle中：我希望粉红色的p填充剩余的黄色空间，并在第一个p元素增长时相应缩小。

我已经看过如何让div填充水平空间（即使用bfc - 块格式化上下文）但我似乎找不到垂直填充的css解决方案。

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

感谢。

Answer 1

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

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

See this Fiddle

Answer 2

使用jquery，你可以这样做：试试吧：

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

完成...... 祝你好运

Answer 3

实际上，执行此操作的方法是使用css tables。

在第二个表格行上设置height:100%是导致它占用“剩余高度”的原因

<强> Updated fiddle - little content

<强> Updated fiddle - more content

标记

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

CSS

.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%;
}

Answer 4

如果您正在处理background colors do this trick

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

4 个答案:

标记

CSS