内容展开容器

我在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

没有固定高度是可以实现的吗？因为我需要“口香糖”布局。 –

内容展开容器

回答

相关问题