子div位置を作る方法：高さが絶対的に反応する

Question

このCSSトリックが CSS tabs without using JavaScriptに作成されました。私はその後、here on Stack垂直タブを作成するためのスクリプトを再設計する方法についての方法を発見し、これが私の「最終」バージョンです：

<div id="contenitore"> 
    <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>Content 1</p></div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-2" name="tab-group-1" checked>  
     <label for="tab-2">Tab Two</label> 
     <div class="content"><p>Content 2</p></div> 
    </div> 

    </div> 
</div> 

そして、これはCSSです：

#contenitore {width:100%; 
       height:auto;} 
.tabs {width:100%; 
     height:auto; 
     position: relative; 
     clear: both; 
     margin: 1% 0;} 
.tab {width:100%; 
     height: auto;} 
.tab label {padding: 1%; 
      margin: 0; 
      position: relative; 
      left: 0;   
      width:6.5%; 
      height:auto; 
      display: block;} 
.tab [type=radio] {display: none;} 
.content {width:87.5%; 
      height:auto; 
      position: absolute; 
      top:0; 
      bottom:0; 
      left:8.5%; /*= width tab label (6.5%) + padding (1% = 1%left+!%right)*/ 
      right: 0; 
      padding: 2%;} 
[type=radio]:checked ~ label {background: white; 
           z-index: 2;} 
[type=radio]:checked ~ label ~ .content {z-index: 1;} 

私は」didnの私が高さを設定しても、div .contentが全く反応しない理由を理解してください：auto（100％は反応しません）。 特定のhtml構造と、入力やラベルのような他の要素との接続に起因するのでしょうか、私はいくつかの間違いを犯していますか？

Answer 1

だけ.contentセレクタから

bottom: 0; 

を削除します。それをポジションのように設定すると、ボトムのリムはコンテナの底に接触します。