與內容高度相同的垂直製表符

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%; 
}