Question

我用div创建了三个选项卡，并将它们与一个文本框一起放入另一个名为window的div中。我希望窗口包含所有内容，有红色背景和周围的蓝色边框。问题是tab div似乎溢出了它们的父div（窗口），导致背景和边框填充的区域比应填充的区域要小。

我尝试设置溢出：隐藏在窗口上，这切断了我不想要的部分标签，但边框现在正好在我想要的内容周围。

另外，我尝试在窗口上设置overflow：auto，但这创建了一个我不想要的滚动条。

有没有办法阻止子元素溢出或扩展窗口div以解决此溢出问题？

您可以看到我尝试制作的页面here。

body {
  background-color: #F79F94;
  text-align: center;
}
.tab {
  background-color: #F47564;
  min-height: 50px;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
.tab-right-line {
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #F79F94;
}
.tab-text {
  color: white;
  font-size: 14pt;
  font-family: georgia;
}
#window {
  border-color: blue;
  border-style: solid;
  border-width: 1px;
  background-color: red;
  display: inline-block;
}

<div id="window">
  <div class="row">
    <div class="col-xs-4 tab tab-right-line">
      <h1 class="tab-text text-center">All</h1>
    </div>
    <div class="col-xs-4 tab tab-right-line">
      <h1 class="tab-text text-center">Online</h1>
    </div>
    <div class="col-xs-4 tab">
      <h1 class="tab-text text-center">Offline</h1>
    </div>
  </div>

  <br>

  <div class="row">
    <input type='text' class='form-control' required>
  </div>
</div>

Answer 1

改变这个：

<div id="window">

到此：

<div class="container-fluid" id="window">

Here is the JSFiddle demo

如何扩展父div以解决孩子的溢出问题？

1 个答案: