Bootstrap面板页脚问题

Question

我正在构建一个使用Bootstrap作为基础和fluid-container的聊天应用程序，因为它需要是一个100％高度和宽度的应用程序，但似乎Bootstrap不喜欢这样所以我最终得到了一些自定义CSS来排序它。

这个想法是页面上显示了两个面板，聊天面板和用户面板以及两者的panel-body都应该自动溢出。

问题是，现在我也在使用panel-footer并且它创建了这个奇怪的问题，请参见截图。

这是CSS：

.panel {
    margin-bottom: 0;
    height: 100vh;
    max-height: 100vh;
    position: relative;
}

.panel-body {
    overflow: auto;
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 0;
    right: 0;
}

.panel-footer {
    position: absolute;
    bottom: 0;
}

顺便说一下，我是自定义CSS的完全初学者，所以如果我让它更令人困惑，那么它需要，并且它可以全部简化，请告诉我！我很感激 ：）

Answer 1

.panel-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}

是否有任何理由将面板的主体和页脚放置在绝对位置？当给身体一个高度时，页脚会自动粘到底部

Answer 2

类似的问题，除了我的页脚最终粘贴到PAGE的底部，而不是相关的面板。我的HTML（在我把它放在一起时，一切都被剥夺了用于测试的骨干）和最小的CSS（再一次，当我得到这个工作时，一切都被剥离到最近）。

<div class="panel panel-default" style="height:100%;border:1px solid pink;"> <!-- border so I can see what's up -->
<div class="panel-heading">
    <h4>Select or create case</h4>
</div>

<div class="panel-body" id="caseSelector">
<!-- empty during testing so as not to muddy the test-->
</div>

<div class="panel-footer case-panel-footer" style="border:1px solid cyan;"> <!-- border so I can see what's up -->
    <div class="col-sm-6">
        <button class="btn btn-primary case-action-button" type="button" disabled="" data-action="select">Open case</button>
    </div>
    <div class="col-sm-6 text-right">
        <button class="btn btn-primary case-action-button" type="button" data-action="new">Create new</button>
    </div>
    <div class="clearfix"></div>
</div>

.case-panel-footer {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}

即使粉红色的边框清楚地显示面板占据了容器中可用的整个区域，我也无法让这个面板页脚坐在面板的收容区域的底部。