在下面的代码中,我试图找出面板从底部扩展到其父级高度的原因。
<!--Beginning of Chart 1 -->
<div id="chartBox1" class="max col-lg-8 col-md-8 col-sm-24 col-xs-24">
<!-- Beginning of Panel For Chart 1 -->
<div class="panel panel-default max">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body max">
</div>
</div>
<!--/ End of Panel For Chart 1 -->
</div>
<!--/ End of Chart 1 -->
CSS 样式为:
body, html{height:100%;}
.row{padding:0px; margin:0px;}
.max{height:100%;}
#rightBox{background-color:#E3E3E3;}
#topCharts{height:50%;}
#botCharts{height:50%;}
#chartBox1{background-color:red; padding:10px;}
#chartBox2{background-color:green; padding:10px;}
#chartBox3{background-color:blue; padding:10px;}
最佳答案
假设 parent 的高度是500px
。由于 .panel-body
的高度设置为父元素的 100%
,因此它的高度也将为 500px
。将此添加到 .panel-heading
的高度,面板将始终延伸到父级之外,因为标题的高度未被考虑在内。
有几个解决方案:
使用
calc()
取代标题的高度。在这种情况下,
.panel-heading
元素的高度为 ~40px
。.panel-body { height: calc(100% - 40px); }
绝对将标题元素定位在父元素的顶部,并使用填充来取代它。
.panel { position:relative; } .panel > .panel-heading { position: absolute; width: 100%; top: 0; } .panel > .panel-body { padding-top:40px; }
关于css - Bootstrap 面板高度超出尺寸 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25586111/