CSS/HTML : Child DIV overflows parent

Question

如何让父 DIV 环绕子 DIV？问题在于 .nav-content 中的 position:absolute。

http://jsfiddle.net/9H77Y/8/

编辑:好吧，显然我想要的是不可能的。解决此问题的唯一方法是使用 javascript，这首先会破坏此目的。但是，将固定高度设置为 nav-tabs 将起作用。

HTML

<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>

CSS

.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 */
}

Answer 1

您不能考虑 position:absolute 元素。

它们已完全从文档流中移除。

引用Specs

absolute
The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.