コンテンツはコンテナを展開します

Question

div表示テーブルに3列の校正があります。 最初はここjsfiddle https://jsfiddle.net/9mzuxza9/2/ 内側の左側には、例えば、列内の内容がコンテナよりも高くなってコンテナが高さに広がってもコンテナが画面の高さと同じ高さになるようにしたい場合、結果は となります。コンテンツ。スクロール：あなたは固定の高さとオーバーフローを必要 CSS

html,body{ 
      width: 100%; 
      height: 100%; 
     } 
     .row{ 
      table-layout: fixed; 
      display: table; 
      height: 100%; 
      width: 100%; 
      border: 1px solid grey; 
     } 
     .left { 
      width:300px; 
      height:100%; 
      display: table-cell; 
     } 
     .middle { 
      height:100%; 
      display: table-cell; 
      width:100%; 
     } 
     .right { 
      height:100%; 
      width:300px; 
      display: table-cell; 
     } 

HTML

 <div class="row"> 
     <div class="left"> Some content <table border="1"> 
       <thead> 
        <tr> 
         <th></th> 
         <th></th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td></td> 
         <td></td> 
        </tr> 
        <tr> 
         <td></td> 
         <td></td> 
        </tr> 
        <!-- ...more rows--> 
       </tbody> 
      </table> 
     </div> 
     <div class="middle"> This should fill the space left </div> 
     <div class="right"> Some other content </div> 
    </div> 

Answer 1

。これらは、テーブルのセル要素では動作しませんので、あなたは、フローティング要素やインラインブロック要素を使用して、外側のdivレイアウトを行う必要があります、

div.left { 
    float: left; 
    overflow: scroll; 
    height: 100px; // or whatever 
} 

またそれがあるとして、あなたのdiv.leftを残して、使用別のコンテナdiv が入っています。子テーブルの周りにがあります。この質問を比較してください：How to create a table cell that scrolls when overflowing