Css - 與卷軸垂直的容器堆棧

我需要包含在固定大小的容器（無卷軸）中的垂直堆棧塊（可以是卷軸）。可視塊的數量由js代碼動態管理。一些塊可以設置爲隱藏或可見。隱藏某個塊後，可見塊應占用所有可用空間。Css - 與卷軸垂直的容器堆棧

我爲此使用了表格元素。但是表格單元格是垂直擴展的，整個表格是垂直擴展超過底部大小的。

如何修復表高？或者可以使用其他一些設計？

這裏是HTML和CSS：

table{ 
 
    table-layout:fixed; 
 
    width: 200px; 
 
    height: 300px; 
 
} 
 
div{ 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow-y:scroll; 
 
    white-space:normal; 
 
}

<table border="1"> 
 
    <tr><td><div> 
 
     dsdgfsjafkgasfd sajhsadfhsafdsfsafs afsafsafsafsa fsafsafsafsafsaf 
 
     asfsafsafsafsafsafs afsaffsfsasafsafsfa sfasfsafsafsaffsafsaffsafsa 
 
    </div></td></tr> 
 
    <tr><td><div> 
 
     dsdgfsja fkgascfdsajhsadfhsafdsfsaf safsafsafsafs afsafsafsafsafsaf 
 
     asfsafsafsaf safsafsafs affsfsasafsafsfa sfasfsafsafsaffsafsaffsafsa 
 
    </div> 
 
</table>

來源

2015-02-09 Belowee P.

你被迫使用表外容器，或者你可以使用別的什麼嗎？ – Giorgio 2015-02-09 10:05:28

我可以使用其他任何東西。首先是結果顯示。 – 2015-02-09 11:45:54

如果容器的高度固定並且沒有滾動條，那麼如何顯示塊超過其高度？ – Giorgio 2015-02-09 12:22:26

這裏有一個固定高度容器和滾動條的解決方案。我已經添加邊框來顯示內部塊和容器：如果需要，可以將其刪除。

#container { 
    border:1px solid black; 
    display:inline-block; 
    overflow-y:scroll; 
    width: 200px; 
    height: 300px; 
} 

#content { 
    border:1px solid green; 
    height: 100%; 
    overflow-y:scroll; 
}

Fiddle

來源

2015-02-09 10:16:59 Giorgio

我制定了更精確的問題。塊應該在視圖中，不滾動。 – 2015-02-09 11:51:38

您是否應該將塊顯示爲內聯而不是塊？ – Giorgio 2015-02-09 12:34:49

認爲這個塊是垂直堆疊的矩形屏幕區域。如果設計可以通過「inline」來實現，那就沒問題。 – 2015-02-09 13:46:41

Css - 與卷軸垂直的容器堆棧

回答

相關問題