Question

我确信在我不能找到它之前就已经问过了。

使用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%;
  }

但结果是mybox溢出了面板的边框：请参阅此plunker http://plnkr.co/edit/rDycxKTFJ8HF2efNhYFl

enter image description here

我尝试使用面板填充/边距但将底部设置为0或-5但不知道如何让黑盒子保持在面板内100％，还尝试将溢出设置为隐藏。

我有什么明显的遗失吗？

Answer 1

那一定是因为填充。如果您将高度设为100%，则元素的实际高度将为100% + padding。因此，删除填充或使用position: absolute并提供top: 0px; bottom: 0px，如果父容器具有position: relative/position:absolute，则会将元素拉伸到父容器。

Answer 2

您只需将面板体底部填充设置为面板标题40px +填充尺寸15px：padding-bottom: 55px;

http://plnkr.co/edit/n6ihcucqCkP9dcAKTtu9?p=preview

Answer 3

使用以下内容更新.mybox css：

.mybox {
          background-color: black;
          height: calc(100% - 40px);
          width: 100%;
}

如何将面板内容设置为面板主体的100％

3 个答案: