twitter-bootstrap 如何将面板的内容设置为面板主体的 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21674115/
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
How to set content of panel to 100% of the panel body
提问by qorsmond
I am sure this was asked before I just cant mange to find it.
我确定这是在我无法找到它之前被问到的。
Using a bootstrap panel that is 100% the height of a window, I want the content of the panel .mybox to stretch 100%
使用 100% 的窗口高度的引导面板，我希望面板 .mybox 的内容拉伸 100%
<body>
<div class="content">
<div class="panel panel-default">
<div class="panel-heading">Map</div>
<div class="panel-body">
<div class="mybox"> </div>
</div>
</div>
</div>
html, body {
height: 100%;
width: 100%;
}
.content {
height: 100%;
}
.panel {
height: 100%;
}
.panel-body {
height: 100%;
}
.mybox {
background-color: black;
height: 100%;
width: 100%;
}
But the result is that mybox overflows the border of the panel: see this plunker http://plnkr.co/edit/rDycxKTFJ8HF2efNhYFl
但是结果就是mybox溢出了面板的边框：看这个plunker http://plnkr.co/edit/rDycxKTFJ8HF2efNhYFl
I tried playing with the panel padding/margin but setting the bottom to 0 or -5 but dont know how to get the black box to stay inside the panel at 100%, also tried setting the overflow to hidden.
我尝试使用面板填充/边距，但将底部设置为 0 或 -5，但不知道如何让黑框以 100% 留在面板内，还尝试将溢出设置为隐藏。
Is there something obvious that I am missing here?
有什么明显的东西我在这里失踪了吗？
回答by Mr_Green
That must be because of padding. if you give height as 100%then the actual height of the element will be 100% + padding. So, remove padding or use position: absoluteand give top: 0px; bottom: 0pxwhich stretches the element to the parent container if the parent container has position: relative/position:absolute.
那一定是因为填充。如果你给 height as100%那么元素的实际高度将是100% + padding. 这样，删除填充或使用position: absolute，并给top: 0px; bottom: 0px其拉伸元件到父容器如果父容器具有position: relative/position:absolute。
回答by qorsmond
You can just set the panel-body bottom padding to the panel-heading 40px + padding size 15px: padding-bottom: 55px;
您可以将面板主体底部填充设置为面板标题 40 像素 + 填充大小 15 像素： padding-bottom: 55px;
回答by Shuvo
Update your .mybox css with this one:
用这个更新你的 .mybox css：
.mybox {
background-color: black;
height: calc(100% - 40px);
width: 100%;
}
