CSS/HTML：子 DIV 溢出父答案

【问题标题】：CSS/HTML: Child DIV overflows parentCSS/HTML：子 DIV 溢出父
【发布时间】：2012-11-26 13:09:25
【问题描述】：

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

编辑：嗯，显然我想要的是不可能的。解决这个问题的唯一方法是 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 */
}

【问题讨论】：

没有给子元素任何高度的原因是什么？
嗯，唯一需要任何设置高度的元素是标签本身和 nav-content 中的 div（或者可能是 nav-content 本身）。但是，标签（即标签）的高度是自动设置的。内容的高度取决于每个选项卡内的内容；我希望根据每个选项卡自动计算高度。

标签： css html height overflow

【解决方案1】：

您不能考虑position:absolute 元素。

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

引用Specs

绝对
框的位置（可能还有大小）由“top”、“right”、“bottom”和“”指定左'的属性。这些属性指定相对于盒子的包含块的偏移量。 从正常流程中取出绝对定位的框。这意味着它们对后面兄弟的布局没有影响。此外，尽管绝对定位的框有边距，但它们不会与任何其他边距一起折叠。

【讨论】：

【解决方案2】：

为 .nav-tab 指定一个确定的高度，并为 .nav-tabs-wrapper 指定溢出：自动（或溢出：隐藏）

【讨论】：