根據畫面剩餘高度建立滾動區域

發表於 | 分類於 | |

這個應用場境是什麼時候會出現呢？
大概是製作手機版型的網頁時會出現…

實現的方法具體來說很簡單
只需要用到兩個 CSS 的特性：

  • flex
  • calc

flex

flex 應該還是目前比較主流的排版方式
手機的版型一般來說是縱向設計
所以會需要在容器的父元素加上：

  • display="flex"
  • flexDirection="column"

當然還有父元素高度要設定

  • height="100vh"

再來就是讓需要建立滾動區塊的子元素佔滿剩餘可用空間：

  • flex={1}
  • overflow="auto"

JSX 代碼範例可以參考下方：

實際的寫法可以根據專案需求再做調整

1
2
3
4
5
6
7
8
9
<Box display="flex" flexDirection="column" height="100vh">
  <TopBar title="頁面標題" />
  <Tabs currentTab={currentTab} setCurrentTab={setCurrentTab} />
  {/* 利用剩餘高度建立的滾動區塊 */}
  <Box flex={1} overflow="auto">
    <List />
  </Box>
  <ButtonGroup />
</Box>

calc

根據不同專案的 layout 設計
可能會出現固定式的 TopBar 或 FooterBar

萬一遇到這種情況要如何處理呢
可以用 calc 這個 css 特型來對高度進行輔助計算

這邊的場景是假設 layout 還包含了一個 position: fixed 的 FooterBar（80px）
這樣頁面父元素的高度可以改寫為：

  • height="calc(100vh - 80px)"

改寫後 JSX 代碼範例可以參考下方：

1
2
3
4
5
6
7
8
9
<Box display="flex" flexDirection="column" height="calc(100vh - 80px)">
  <TopBar title="頁面標題" />
  <Tabs currentTab={currentTab} setCurrentTab={setCurrentTab} />
  {/* 利用剩餘高度建立的滾動區塊 */}
  <Box flex={1} overflow="auto">
    <List />
  </Box>
  <ButtonGroup />
</Box>

本文作者： David Huang
本文地址： https://davidblog.github.io/2023/07/28/根據畫面剩餘高度建立滾動區域/

0%