使 <div> 填充剩余高度答案

【问题标题】：Make <div> fill remaining height使 <div> 填充剩余高度
【发布时间】：2016-01-29 15:48:58
【问题描述】：

这是 Bootstrap 3。我只想将我的 sidebar 分成两个部分。底部应足够高以容纳内容，而顶部应填充父级的剩余高度。以下是我用我有限的 HTML/CSS 能力所能达到的最接近的结果：

我的 HTML：

<body>
    <div class="container-fluid">
        <div class="sidebar col-md-3" style="background-color: lightyellow">
            <div class="topClass" style="background-color: lightcoral;">
                Should fill the remaining height of the parent
            </div>
            <div class="bottomClass" style="background-color: lightcyan;">
                Should be high enough to fit its contents
                A few lines of text <br />
                A few lines of text <br />
                A few lines of text <br />
                A few lines of text <br />
            </div>
        </div>
    </div>
</body>

我的 CSS：

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
}

    .sidebar .topClass {
        position: absolute;
        overflow-x: hidden;
        overflow-y: auto; 
        position: absolute;
        left: 0;
        right: 0;
    }

    .sidebar .bottomClass {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

我在 Google 机器上看到了一个非常相似的问题，但在我的情况下，我不知道另一个 <div> 的高度，所以我认为我不能使用新的 calc 功能。

【问题讨论】：

标签： html css twitter-bootstrap layout twitter-bootstrap-3

【解决方案1】：

无需使用postion:fixed 或position:absolute。使用table 和table-row 得到想要的结果。

body,html{height:100%; padding:0; margin:0;}
.container-fluid, .sidebar{height:100%; background:grey; display:table; width:100%;}
.topClass{display:table-row; height:100%;}
.bottomClass{display:table-row;}

DEMO

【讨论】：

尝试将一些内容添加到顶部
以创建溢出。那时，我希望它通过简单地添加滚动条来保持其布局。相反，它会扩展并向下推动底部
。将overflow: scroll 添加到顶部
也无济于事。或者我错过了什么？

【解决方案2】：

我有一个适用于 Chromium 和 Chrome 但不适用于 FF 的解决方案，我没有在其他浏览器上对其进行测试。

HTML：

<div class="sidebar">
    <div class="table stretch-v">
        <div class="row stretch-v">
            <div class="cell">
                <div class="top-class stretch">
                    Some Content
                </div>
            </div>
        </div>
        <div class="row">
            <div class="cell">
                <div class="bottom-class">
                    Some other Content
                </div>
            </div>
        </div>  
    </div>
</div>

CSS：

.sidebar{height: 100%; background:grey;}
.table {display:table;}
.row {display:table-row;}
.cell {display:table-cell;}
.stretch-v {height:100%;}
.stretch {width:100%; height:100%;}
.top-class{overflow:auto;}

这就是它的样子：Demo

【讨论】：

这是迄今为止我得到的最佳解决方案。在有人想出更好的主意之前，我会接受它作为答案。

【解决方案3】：

我的一个朋友向我展示了一个使用flex layout 的更好的解决方案，它至少适用于 Firefox 和 Chrome/Chromium。

HTML：

<div class="sidebar">
  <div class="top">
    Should fill the remaining height of the parent<br />
    and bring up a scrollbar on overflow.
  </div>
  <div class="bottom">
    Should be high enough to fit its content.
  </div>
</div>

CSS：

body, html { height:100%; width:100%; padding:0; margin:0; }
.sidebar { height:100%; display: flex; flex-direction:column; }
.sidebar > .top { flex-grow:1; overflow:auto; }
.sidebar > .bottom { flex:0 0 content; }

我还更新了小提琴：JSFiddle

【讨论】：

谢谢。这是一个很好的解决方案。 flex-grow: 1 允许内容部分填满整个屏幕，而 flex: 0 0 无论屏幕大小如何，内容都将保留在底部。

【解决方案4】：

试试这个：

只需在 topClass 标签中添加高度 100%

<div class="topClass" style="background-color: lightcoral;height:100%">

更正的 HTML：

 <div class="container-fluid">
        <div class="sidebar col-md-3" style="background-color: lightyellow;">
            <div class="topClass" style="background-color: lightcoral;height:100%">
                Should fill the remaining height of the parent
            </div>
            <div class="bottomClass" style="background-color: lightcyan;">
                Should be high enough to fit its contents
                A few lines of text <br />
                A few lines of text <br />
                A few lines of text <br />
                A few lines of text <br />
            </div>
        </div>
    </div>

【讨论】：

解决方案不正确。这使得顶部
占据窗口高度的 100%。正如我在帖子标题和正文中提到的，我需要它来填充 remaining 高度，即顶部 div 高度 = 窗口高度 - 底部 div 高度。