CSS/HTML：子DIV溢出父项

如何使父DIV环绕子DIV？问题在于.nav-content中的position:absolute。CSS/HTML：子DIV溢出父项

编辑：很明显，我想什么是不可能的。解决这个问题的唯一方法就是使用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 */ 
}

来源

2012-12-08 Marc05

有，你有没有任何给定的子元素的理由高度？ –

那么，需要任何设置高度的唯一元素就是标签本身和导航内容中的div（或者也许是导航内容本身）。但是，标签的高度（即标签）会自动设置。内容的高度取决于每个标签内的内容;我想根据每个标签自动计算高度。 – Marc05

你无法解释position:absolute元素。

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

引述Specs

绝对
的框的位置（以及可能的尺寸）与 '顶部' 指定， '右'， '底部' 和' left'properties。这些属性指定相对于框的包含块的偏移量。 绝对放置的盒子取出正常流程。这意味着它们对后面的兄弟姐妹的布局没有影响。此外，虽然绝对定位的盒子有利润率，但它们不会与其他利润率折叠。

来源

2012-12-08 14:58:41

给出一个确切的高度.nav标签，并给溢出：自动（或溢出：隐藏），以.nav-标签，包装

来源

2013-03-04 12:22:37 Neeraj

CSS/HTML：子DIV溢出父项

回答

相关问题