使用 Bootstrap 。我希望顶部 div 根据内容固定高度,底部 div 填充父级的剩余高度。总高度应为 100%。
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div id="test">
<div>
Fixed height according to content.
</div>
<div class="fill">
Rest of the height
</div>
</div>
</div>
</div>
</div>
CSS:
html, body{
height: 100%;
}
.container-fluid, .row, .col-lg-6, #test{
height: 100%;
}
.fill {
background-color: #FF0000;
height: 100%
}
但是底部的 div 似乎恰好是 100% 并且溢出了。这个想法也是将有几个专栏。
提前致谢!
fiddle :https://jsfiddle.net/eb8v57pe/4/
最佳答案
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div id="test">
<div class="header">
Fixed height according to content.
</div>
<div class="fill">
Rest of the height
</div>
</div>
</div>
</div>
</div>
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
html, body{
height:100%;
padding: 0;
border: none;
margin: 0;
}
.container-fluid, .row, .col-lg-2{
height: 100%;
}
#test {
display: table;
width: 100%;
height: 100%;
}
#test > .header {
display: table-row;
height: 1%;
}
#test > .fill {
display: table-row;
background-color: #FF0000;
}
关于html - Bootstrap - 填充列的剩余高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36667452/