CSS表有一行溢出

我需要一个CSS设计，有三行并填充整个屏幕。第二行有三列。每列有三个部分（顶部，中部，底部）。我想最后一部分，如果它太大，有一个滚动条，所以内容不会流出页面。CSS表有一行溢出

我已经尝试了一段时间，但我的主要问题是我想溢出的部分不会使滚动框，它只是从页面流出。有没有办法做到这一点？也许使用display:flex？

这里是我的代码的基本概念：

<div class="table"> 
    <div class="header"> 
     Header content here 
    </div> 
    <div class="content table-row"> 
     <div class="table-col"> 
      <div class="top-content"> 

      </div> 
      <div class="middle-contnet"> 

      </div> 
      <div class="bottom-contnet"> 
       If this content is too big, then make this div an overflow-y:scroll 
      </div> 
     </div> 
     <div class="table-col"> 
      <div class="top-content"> 

      </div> 
      <div class="middle-contnet"> 

      </div> 
      <div class="bottom-contnet"> 
       If this content is too big, then make this div an overflow-y:scroll 
      </div> 
     </div> 
     <div class="table-col"> 
      <div class="top-content"> 

      </div> 
      <div class="middle-contnet"> 

      </div> 
      <div class="bottom-contnet"> 
       If this content is too big, then make this div an overflow-y:scroll 
      </div> 
     </div> 
    </div> 
    <div class="footer"> 
     Footer content here 
    </div> 
</div>

如果你能帮助，请做。

来源

2015-08-08 TYLER TRACY.17

哪里是你的CSS代码？ –

请参阅我编辑的答案。如果你觉得它有用，请检查它旁边的复选标记。它会出现在悬停。它应该变成绿色。（你只能用一个答案来做到这一点）。欢迎来到堆栈溢出！ –

我已编辑我的答案，所以你可以运行代码段并进入全屏模式 –

您是否曾尝试向行中添加额外的类，以便您可以拥有溢出类并将其应用于仅特定行？

.overflow: overflow-y: scroll;

<div class="bottom-contnet overflow"> 
 
    If this content is too big, then make this div an overflow-y:scroll 
 
</div>

来源

2015-08-08 15:40:16 Alex

我已经尝试过。问题是bottom-content类没有固定的高度，它填充了页面的其余部分。所以溢出不适用，它只是从页面流出 –

CSS表有一行溢出

回答

相关问题