CSS/HTML:子DIV溢出父级

如何使父DIV环绕子DIV？问题在于位置：绝对导航内容

编辑：嗯，显然我想要的是不可能的。解决这个问题的唯一方法是javascript，它首先会破坏这个目的。但是，将固定高度设置为导航选项卡将起作用

HTML

你不能解释位置：绝对元素

它们将从文档流中完全删除

引用

绝对的 框的位置和可能的大小由“顶部”、“右侧”、“底部”和“左侧”属性指定。这些特性指定相对于长方体包含块的偏移。绝对定位的箱子从正常流量中取出。这意味着它们对以后兄弟姐妹的布局没有影响。此外，尽管绝对定位框有边距，但它们不会与任何其他边距一起折叠

你不能解释位置：绝对元素

它们将从文档流中完全删除

引用

绝对的 框的位置和可能的大小由“顶部”、“右侧”、“底部”和“左侧”属性指定。这些特性指定相对于长方体包含块的偏移。绝对定位的箱子从正常流量中取出。这意味着它们对以后兄弟姐妹的布局没有影响。此外，尽管绝对定位框有边距，但它们不会与任何其他边距一起折叠

---

给.nav tab指定一个明确的高度，给overflow:auto或overflow:hidden to.nav tabs wrapper指定一个明确的高度，给overflow:auto或overflow:hidden to.nav tabs wrapper指定一个明确的高度，有没有理由不给子元素任何高度，唯一需要设置高度的元素是标签本身和导航内容内的div，或者导航内容本身。但是，标签（即选项卡）的高度会自动设置。内容的高度取决于每个标签内的内容；我希望根据每个选项卡自动计算高度。是否有理由不给子元素任何高度？嗯，唯一需要设置高度的元素是标签本身和导航内容内的div，或者导航内容本身。但是，标签（即选项卡）的高度会自动设置。内容的高度取决于每个标签内的内容；我想根据每个选项卡自动计算高度。

<div class="nav-tabs-wrapper">
  <div class="nav-tabs">
    <div class="nav-tab">
      <input type="radio" id="tab1" name="nav-group" checked>
      <label for="tab1">foooooooo</label>
      <div class="nav-content">
        <div> stuff1 </div>
      </div>
    </div>
    <div class="nav-tab">
      <input type="radio" id="tab2" name="nav-group">
      <label for="tab2">bar</label>
      <div class="nav-content">
        <div> stuff2 </div>
      </div>
    </div>
  </div>
</div>

.nav-tabs-wrapper
{
    padding: 10px; /* separates the code from other content */
    border: 1px solid #F00; /* visibility aid */
}
.nav-tabs
{
    position: relative; /* needed as future positioning reference base */
            clear: both;
            height: 200px; /* Unfortunate */
    padding-left: 10px; /* provides the paragraph-tab effect to the tabs */
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
}
.nav-tab
{
    float: left; /* keeps the tabs inline with no gap [inline-block introduces gaps] */
}
.nav-tab label
{
    display: block; /* needed so tabs can be positioned correctly to hide nav-content border */
    position: relative; /* needed to position tabs correctly */
    top: 1px; /* lowers the tabs to cover the border of nav-content; needed so bottom corners aren't slanted, but a 90deg angle */
    padding: 4px;
    border: 1px solid #999;
    border-bottom-width: 0px; /* removes bottom border; needed so bottom corners aren't slanted, but a 90deg angle */
    background-color: #CCC;
}
.nav-tab [type=radio]
{
    display: none; /* hide the radio selectors */
}
.nav-tab [type=radio]:checked ~ label
{
    z-index: 2; /* makes sure that the active tab is drawn above nav-content to cover border */
    background-color: #FFF; /* covers the nav-content border */
}
.nav-tab [type=radio]:checked ~ .nav-content
{
    visibility: visible !important; /* unhides the nav-content div for the current tab */
}
.nav-tab:nth-child(n+2)
{
    margin-left: -1px; /* positions the left border of every second+ tab over the previous tab's right border */
}
.nav-content
{
    visibility: hidden; /* hides the content by default */
    position: absolute; /* positions the content for all tabs to the absolute left relative to the tabs */
    left: 0; /* undo's the padding from the paragraph-tab effect */
    width: 100%; /* fills the nav-content DIV completely for a better looking border */
    z-index: 1; /* makes sure that the border is drawn under the tabs */
    border: 1px solid #999;
}
.nav-content div
{
    padding: 10px; /* separate div needed to keep nav-content from overflowing due to padding */
}