我知道這可能會被問很多，但不知何故我找不到解決方案。我在 React 中的項目和我的頂級組件的設(shè)置如下：<Provider store={store}>
<Router>
<Header />
<Switch>
<All the routes />
</Switch>
<Footer />
</Router></Provider>如您所見，我想在所有頁面中使用頁眉和頁腳。根據(jù)我當(dāng)前的設(shè)置，當(dāng)我的內(nèi)容高度大于視圖高度時它會起作用。我的意思是頁腳始終位于底部。問題出現(xiàn)在我的較小頁面上，其中頁面內(nèi)容小于視圖高度，但我的頁腳仍然略低于視圖高度。我當(dāng)前的CSS代碼（不包括不必要的代碼）：標(biāo)題padding: "0.2em 4em"內(nèi)容包裝器minHeight: "100%",頁腳padding: "3em"鏈接上的頁面之一（顯示頁腳如何位于vh. header 作為默認塊元素保留在頂部并且很好）：結(jié)果
1 回答
拉莫斯之舞
TA貢獻1820條經(jīng)驗 獲得超10個贊
在這種情況下你應(yīng)該使用flexbox。你的代碼是反應(yīng)的，但我會嘗試使用 html 和 css，這樣你就可以理解你必須應(yīng)用的規(guī)則?？催@個例子：
.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，它將產(chǎn)生您正在尋找的結(jié)果。
如果您對此還有任何疑問或困惑，請告訴我。
- 1 回答
- 0 關(guān)注
- 215 瀏覽
添加回答
舉報
0/150
提交
取消