与内容高度相同的垂直制表符

Question

实际上，我有一个垂直制表符菜单，我试图实现的是根据内容或制表符高度动态设置菜单包装高度（获得较大胜利的那个）

这里是我到目前为止做出一个的jsfiddle：http://jsfiddle.net/f9zt9xqr/2/

HTML：

<div id="page-wrap"> 
     <div class="tabs"> 
     <div class="tab"> 
      <input type="radio" id="tab-1" name="tab-group-1" checked> 
      <label for="tab-1">Tab One</label> 
      <div class="content"> 
      <p>Stuff for Tab One</p> 
      </div> 
     </div> 
     <div class="tab"> 
      <input type="radio" id="tab-2" name="tab-group-1"> 
      <label for="tab-2">Tab Two</label> 
      <div class="content"> 
      <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
      <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p> 
      <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla?</p> 
      </div> 
     </div> 
     <div class="tab"> 
      <input type="radio" id="tab-3" name="tab-group-1"> 
      <label for="tab-3">Tab Three</label> 
      <div class="content"> 
      <p>Stuff for Tab Three</p> 
      </div> 
     </div> 
     </div> 
    </div> 

CSS：

* { 
    gmargin: 0; 
    spadding: 0; 
} 
body { 
    background: #f9f9fc; 
} 
#tab-1{ 
    position: absolute; 
    top: -200px; 
    left: -200px; 
} 
#tab-3{ 
    position: absolute; 
    top: -200px; 
    left: -200px; 
} 
#tab-2{ 
    position: absolute; 
    top: -200px; 
    left: -200px; 
} 

#page-wrap{ 
    position: relative; 
    background:#123456; 
} 
.tabs { 
    position: relative; 
    hmin-height: 200px; 
    /* This part sucks */ 
    clear: both; 
    smargin: 25px 0; 
} 
.tab { 
    rfloat: left; 
    sposition:absolute; 
    height: auto; 
} 
.tab label { 
    background: #f5f5f9; 
    padding: 10px; 
    border: 1px solid #ccc; 
    margin-left: -1px; 
    dposition: relative; 
    left: 1px; 
    width: 70px; 
    display: block; 
} 
.tab[type=radio] { 
    display: none; 
} 

.content { 
    display:none; 
    position: absolute; 
    top: 0px; 
    left: 92px; 
    background: white; 
    right: 0; 
    zbottom: 0; 
    padding: 20px; 
    border: 1px solid #ccc; 
} 
[type=radio]:checked ~ label { 
    background: white; 
    sborder-bottom: 1px solid white; 
    z-index: 2; 
} 
[type=radio]:checked ~ label ~ .content { 
    8overflow:auto; 
    display:inline; 
    z-index: 1; 
} 

在第二个选项

你可以清楚地看到，该页面包装不延伸到内容大小

我在想，这是因为内容是标签的内部元件，因此应该有修改，但它也没有工作。

任何建议如何实现这一点，也许不介意解释我做错了什么？

Answer 1

.tabs { display:table; } 
label {display:table-cell;} 
.content {display-table:cell;} 

删除绝对位置，因为它不会帮助你在这种情况下。看看它是如何去

PS：去掉display:inline从[type="radio"]:checked ~ label ~ .content

Answer 2

我更新的CSS采取了一些绝对定位和取得的内容具有100％的最小高度，这也需要取出内容区域的垂直填充。

http://jsfiddle.net/f9zt9xqr/4/

.content { 
    display:none; 
    position: absolute; 
    top: 0; 
    left: 92px; 
    background: white; 
    right: 0; 
    padding: 0 20px; 
    border: 1px solid #ccc; 
    min-height: 100%; 
}