Question

无法弄清楚如何制作

<div class="panel-body">

延伸到完整父div的高度，没有硬编码值，例如不使用像“填充：40px”，边距或计算（100％ - 40px）等的东西。

该面板用于容纳一棵树，根据用户的打开和关闭文件夹，树的高度可能会有所不同，所以我想将面板拉伸到剩余空间的100％并有一个滚动条。

希望能够获得至少IE11的解决方案。

HTML：

<div class="container">
    <div class="ph">Page Header</div>
    <div class="panel panel-default">
        <div class="panel-heading">Panel header</div>
        <div class="panel-body" style="overflow-y: scroll">
            Variable height content
        </div>
        <div class="panel-footer">
            <button class="btn btn-success">
                Save
          </button>
        </div>
    </div>
</div>

CSS：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

html,body{height:100%;}

.ph {
    padding-bottom: 16px;
}

.container {
    height:100%;
    padding: 16px;
}

http://jsfiddle.net/3v4vo2c4/2/

Answer 1

您必须定义height的父级.panel-body和height的{{1}}才能获得该级别。{/ p>

.panel-body

See Updated Fiddle

使用：IE11，Chrome 58，FF 53和Edge 38

使Bootstrap面板内容div延伸到其父级的100％，没有硬编码值

1 个答案: