我知道這可能會被問很多，但不知何故我找不到解決方案。我在 React 中的項目和我的頂級組件的設置如下：<Provider store={store}>
<Router>
<Header />
<Switch>
<All the routes />
</Switch>
<Footer />
</Router></Provider>如您所見，我想在所有頁面中使用頁眉和頁腳。根據我當前的設置，當我的內容高度大于視圖高度時它會起作用。我的意思是頁腳始終位于底部。問題出現在我的較小頁面上，其中頁面內容小于視圖高度，但我的頁腳仍然略低于視圖高度。我當前的CSS代碼（不包括不必要的代碼）：標題padding: "0.2em 4em"內容包裝器minHeight: "100%",頁腳padding: "3em"鏈接上的頁面之一（顯示頁腳如何位于vh. header 作為默認塊元素保留在頂部并且很好）：結果
1 回答
拉莫斯之舞
TA貢獻1820條經驗 獲得超10個贊
在這種情況下你應該使用flexbox。你的代碼是反應的，但我會嘗試使用 html 和 css，這樣你就可以理解你必須應用的規則?？催@個例子：
.app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
position: sticky;
top: 0;
padding: 15px 5px;
background-color: pink
}
.footer {
padding: 15px 5px;
background-color: pink;
margin-top: auto;
}
<div class="app">
<div class="header">
Your Header
</div>
<div class="app-content">
Your will have routes here that will render your components as required
</div>
<div class="footer">
Your Footer
</div>
<div>
這里的技巧是在頁腳上使用margin-top，它將產生您正在尋找的結果。
如果您對此還有任何疑問或困惑，請告訴我。
- 1 回答
- 0 關注
- 203 瀏覽
添加回答
舉報
0/150
提交
取消