如何扩大母公司来解决孩子的溢出问题？ [英] How to expand parent div to account for child's overflow?

问题描述

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

我尝试设置overflow：隐藏在窗口上，这样就切掉了我不想要的部分选项卡，但是边框现在完全围绕着内容我想要什么。

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

是否有办法阻止子元素溢出或扩大窗口div来解决这个溢出问题？

你可以看到我正在尝试此处。

  body {background-color：＃F79F94; text-align：center;}。tab {background-color：＃F47564;最小高度：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;背景颜色：红色; display：inline-block;}  

< div id = 窗口 > < div class =row> < div class =col-xs-4 tab tab-right-line> < h1 class =tab-text text-center>全部< / h1> < / DIV> < div class =col-xs-4 tab tab-right-line> < h1 class =tab-text text-center>线上< / h1> < / DIV> < div class =col-xs-4 tab> < h1 class =tab-text text-center>离线< / h1> < / DIV> < / DIV> <峰; br> < div class =row> < input type ='text'class ='form-control'required> < / div>< / div>

解决方案

 < div id =window>  b 
 
 
 
 
 
 < div class =container-fluidid =window> 
  

这是 JSFiddle 演示

I created three tabs out of divs and put them along with a textbox into another div called window. I want window to encompass all of the content, have red background, and a blue border around it. The problem is that the tab divs appear to be overflowing their parent div (window) causing the background and border to fill a smaller area than should be filled.

I tried setting overflow:hidden on the window and this chopped off part of the tabs which I didn't want, however the border now went exactly around the content which is what I did want.

Also, I tried setting overflow:auto on the window, but this created a scroll bar which I don't want.

Is there a way to stop the child elements from overflowing or expand the window div to account for this overflow?

You can see the page I am trying to make 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>

解决方案

Change this:

<div id="window">

to this:

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

Here is the JSFiddle demo

这篇关于如何扩大母公司来解决孩子的溢出问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！