dot*_*NET 7 html css layout twitter-bootstrap twitter-bootstrap-3
它是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;
}
我看到谷歌机器上列出了一个非常类似的问题,但在我的情况下,我不知道对方的高度<div>,所以我想我不能使用新calc功能.
我有一个适用于 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;}
这就是它的样子：演示