包裝div的垂直滾動

Question

我想實現一種divs表。第一個「列」必須固定，其他的可以水平滾動。 這些東西都實現了，現在到了問題：垂直滾動。

我想只有一個滾動條，將以同樣的方式（同步）滾動兩個div，爲了實現這個目標，我已經把兩個div放在另一個div裏面，但它不起作用。

HTML

<div class="recipe_rows"> 
    <div class="recipe_first_col"> 
     <div class="recipe_row recipe_header"> 
      <!-- row for buttons --> 
      <p>C1R1</p> 
     </div> 
     <div class="recipe_row"> 
      <!-- row for segment selection --> 
      <p>C1R2</p> 
     </div> 
     <div class="recipe_row"> 
      <!-- row for setpoints --> 
      <p>C1R3</p> 
     </div> 
     <div class="recipe_row"> 
      <!-- row for events --> 
      <p>C1R4</p> 
     </div> 
    </div> 
    <div class="recipe_cols"> 
     <div class="recipe_row recipe_header"> 
      <!-- row for buttons --> 
      <p>C2R1</p> 
      <p>C3R1</p> 
     </div> 
     <div class="recipe_row"> 
      <!-- row for segment selection --> 
      <p>C2R2</p> 
     </div> 
     <div class="recipe_row"> 
      <!-- row for setpoints --> 
      <p>C2R3</p> 
      <p>C3R3</p> 
      <p>C4R3</p> 
      <p>C5R3</p> 
      <p>C6R3</p> 
      <p>C7R3</p> 
      <p>C8R3</p> 
      <p>C9R3</p> 
      <p>C10R3</p> 
      <p>C11R3</p> 
      <p>C12R3</p> 
      <p>C13R3</p> 
     </div> 
     <div class="recipe_row"> 
      <p>C2R4</p> 
     </div> 
    </div> 
</div> 

CSS

.recipe_rows { 
    width: 99%; 
    height: 180px; 
    overflow: auto; 
    line-height: 52px; 
    clear: both; 
    overflow-y:visible; 
} 

.recipe_rows p { 
    float: left; 
    width: 165px; 
    height: 40px; 
    line-height: 40px; 
    padding: 5px; 
    margin: 0px; 
} 

.recipe_first_col { 
    float: left; 
    width: 175px; 
    height: 99%; 
    background: #eee; 
    /*overflow: auto;*/ 
    overflow-y: hidden; 
} 

.recipe_cols { 
    height: 99%; 
    margin-left: 175px; 
    /*overflow: auto;*/ 
    overflow-y: hidden; 
} 

.recipe_header { 
    font-weight: bold; 
    border-bottom: 1px solid #333; 
    border-top: 1px solid #aaa; 
    color: #fff; 
    background: #006 url('../media/menu_blu.png'); 
} 

.recipe_row { 
    float: left; 
    white-space: nowrap; 
    width: inherit; 
    clear: both; 
} 

JSFiddle

正如你可以看到有這一個板缺第4行。 如何獲得外部div的垂直滾動條？

感謝所有

編輯

好吧，我做什麼像什麼，我需要： JsFiddle v.2

現在的問題是：它可能具有水平滾動條沒底的「表」，但固定在div recipe_cols的底部？

Answer 1

如果我理解正確的話，這是你想要的行爲：See Fiddle

要做到這一點，你需要用行的另一個div來實現垂直滾動。對於這個，只需使用絕對定位來獲得合適的尺寸。

相關代碼：

HTML

<div class="recipe_rows"> 
    <div class="recipe_first_col"> 
     <div class="recipe_row recipe_header"> 
      <!-- row for buttons --> 
      <p>C1R1</p> 
     </div> 
     <div class="recipe_row"> 
      <!-- row for segment selection --> 
      <p>C1R2</p> 
     </div> 
     <div class="recipe_row"> 
      <!-- row for setpoints --> 
      <p>C1R3</p> 
     </div> 
     <div class="recipe_row"> 
      <!-- row for events --> 
      <p>C1R4</p> 
     </div> 
    </div> 
    <div class="recipe_cols"> 
     <div class="recipe_row recipe_header"> 
      <!-- row for buttons --> 
      <p>C2R1</p> 
      <p>C3R1</p> 
     </div> 
     <div class="row-scroll"> 
      <div class="recipe_row"> 
       <!-- row for segment selection --> 
       <p>C2R2</p> 
      </div> 
      <div class="recipe_row"> 
       <!-- row for setpoints --> 
       <p>C2R3</p> 
       <p>C3R3</p> 
       <p>C4R3</p> 
       <p>C5R3</p> 
       <p>C6R3</p> 
       <p>C7R3</p> 
       <p>C8R3</p> 
       <p>C9R3</p> 
       <p>C10R3</p> 
       <p>C11R3</p> 
       <p>C12R3</p> 
       <p>C13R3</p> 
      </div> 
      <div class="recipe_row"> 
       <p>C2R4</p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.recipe-cols { 
    position:relative; 
} 

.row-scroll { 
    position:absolute; 
    top:52px; 
    bottom:0; 
    left:0; 
    overflow-y:scroll; 
} 

Answer 2

這是你需要什麼？ FIDDLE.

CSS

.recipe_first_col { 
    float: left; 
    width: 175px; 
    height: 99%; 
    background: #eee; 
    /*overflow: auto;*/ 
    overflow-y: scroll; 
    overflow-x:hidden; 
}