內容展開容器

我在div展示桌上有3列的頁面打樣。這裏第一個是jsfiddle https://jsfiddle.net/9mzuxza9/2/ 在左側我放置了很多行的表格，例如它的結果當col內的內容變得高於容器並且容器擴展了他的高度，但是我希望那個容器保持在與screen no相同的高度內容。 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>

來源

2016-04-19 Sultan Zhumatayev

我不完全明白你的意思，但隱藏溢出的內容在容器上使用'overflow：hidden;'。要使它滾動，請使用'overflow：scroll-y;' – cdm

@cdm它似乎不適用於'display：table-cell;'OP使用 – KWeiss

並給「左」類一些固定高度。 –

你需要一個固定的高度和溢出：滾動。這將不是一個表，電池元件上工作，那麼你將有浮動元素或inline-block的元素做你的外層div佈局：

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

另外，您可div.left，因爲它是和使用一個單獨的容器div 裏面它，圍繞子表。比較這個問題：How to create a table cell that scrolls when overflowing

來源

2016-04-19 07:35:17 KWeiss

你的意思是這樣嗎？ https://jsfiddle.net/9mzuxza9/3/，但也沒有起作用。「容器元素」作爲內容展現其高度。 –

你必須給它一個**固定高度**。例如：https://jsfiddle.net/9mzuxza9/4/ – KWeiss

沒有固定高度是可以實現的嗎？因爲我需要「口香糖」佈局。 –

內容展開容器

回答

相關問題