twitter-bootstrap 使 <div> 填充剩余高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25499512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make <div> fill remaining height
提问by dotNET
It's Bootstrap 3. I just want to split my sidebarinto two sections. The bottom part should be high enough to fit the contents, while the top section should fill the remaining height of the parent. Following is the closest that I could achieve with my limited HTML/CSS abilities:
这是 Bootstrap 3。我只想将我的内容sidebar分成两部分。底部应足够高以容纳内容，而顶部应填充父级的剩余高度。以下是我有限的 HTML/CSS 能力所能达到的最接近的结果：
My HTML:
我的 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>
My CSS:
我的 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;
}
I see a very similar problems listed on Google machine, but in my case I don't know the height of the other <div>, so I think I can't use the new calcfunction.
我在谷歌机器上看到了一个非常相似的问题，但在我的情况下我不知道另一个的高度<div>，所以我想我不能使用新calc功能。
采纳答案by Rouven B.
I've got a solution that works for Chromium and Chrome but not for FF and I didn't test it on further browsers.
我有一个适用于 Chromium 和 Chrome 但不适用于 FF 的解决方案，我没有在其他浏览器上测试它。
HTML:
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:
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;}
And this is what it looks like: Demo
这就是它的样子：演示
回答by Suresh Ponnukalai
No need to use postion:fixedor position:absolute. Use tableand table-rowto get the desired result.
无需使用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;}
回答by Rouven B.
A friend of mine showed me a better solution using flex layoutthat works at least for Firefox and Chrome/Chromium.
我的一个朋友向我展示了一个更好的解决方案flex layout，它至少适用于 Firefox 和 Chrome/Chromium。
HTML:
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:
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; }
I also updated the fiddle: JSFiddle
我还更新了小提琴：JSFiddle
回答by Suganth G
Try this:
试试这个：
Just add height 100% in topClass tag
只需在 topClass 标签中添加高度 100%
<div class="topClass" style="background-color: lightcoral;height:100%">
CORRECTED HTML:
更正的 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>
