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表有一行溢出

回答

相關問題