3

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

容器有 2 段。

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

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

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

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

谢谢。

4

4 回答 4

7

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

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

看到这个小提琴

于 2012-11-28T13:19:35.193 回答
1

实际上，这样做的方法是使用css tables。

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

更新小提琴 - 小内容

更新小提琴 - 更多内容

标记

<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%;
}
于 2013-10-21T20:22:32.650 回答
1

使用 jquery 你可以做到这一点：试试看：

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

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

于 2012-11-28T13:24:43.250 回答
-2

如果你正在处理background colors你可以做这个技巧

于 2012-11-28T13:23:22.190 回答