固定頁眉和頁腳，在1fr CSS grid區域內具有可滾動邊欄

我有一個webapp的CSS網格佈局，具有固定大小的頁眉和頁腳（用rem單位定義）和可擴展的中心行（定義爲1fr ），其中包含兩個側邊欄和一箇中央內容區域。外柵格容器被定義爲寬度和高度以填充視口（100vw/vh）。我希望中心行佔用頁眉和頁腳之間的所有空間，並且要讓任何溢出滾動，而不是擴大頁面的高度。固定頁眉和頁腳，在1fr CSS grid區域內具有可滾動邊欄

我試過各種可能的解決方案，包括使用overflow-y:scroll，但似乎沒有任何工作。額外的內容使頁面更長，而不是使區域可滾動。

我不想爲中心行使用固定大小，因爲我希望它擴大以適應任意大的屏幕。

這裏是我的佈局相當小例子：

https://codepen.io/Shepazu/pen/EwePgB

（請注意，在HTML和CSS嵌套區域是故意的，因此任何解決方案應該是CSS而已，不應改變。HTML標記）

來源

2017-10-13 Doug Schepers

歡迎堆棧溢出！尋求代碼幫助的問題必須包含在問題本身中重現**所需的最短代碼**最好在[** Stack Snippet **]中（https://blog.stackoverflow.com/2014/09/introducing-runnable） -javascript-CSS-和HTML的代碼段/）。 –

這是你在找什麼？ https://codepen.io/solbreslin/pen/pWOybz – sol

假設頁眉和頁腳的固定高度爲100像素，然後給樣式到內容區域：

.center-row { 
max-height: calc(100vh - 200px); 
overflow-y: auto; 
}

來源

2017-10-13 10:01:52 Vishnu

這似乎是一個好開始！它似乎不適合我，可能是因爲嵌套網格，但我會繼續玩'calc'和'max-height'的想法，我會讓你知道如果解決了它。謝謝！ –

固定頁眉和頁腳，在1fr CSS grid區域內具有可滾動邊欄

回答

相關問題