我正在創建一個 reactJS 應用程式，但無法將頁腳保留在頁面底部。頁腳最初停留在頁面底部，但SPDashboard動態填充頁面并且它變得更大并且頁腳確實停留在底部，但它與頁面重疊。如何將頁腳保持在底部并防止它與div.dashboard？
這是代碼：
.monitoring-footer {
position: absolute;
left: 0;
bottom: 0;
height: 75px;
width: 100%;
}
header {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
height: 12vh;
}<div className="App">
<header style={{backgroundColor: '#014e8c'}}>
<h1 className="App-header">Tool</h1>
</header>
<div className="dashboard" style={{justifyContent: 'center', marginTop: '3vh'}}>
<SPDashboard/>
<CDashboard/>
</div>
<footer className="monitoring-footer" style={{backgroundColor: '#014e8c', marginTop: '45px', justifyContent: 'center'}}>
<p> footer</p>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
</footer>
</div>uj5u.com熱心網友回復：
發生這種情況是因為您將頁腳的位置設定為absolute導致它忽略元素流。
因為您說SPDashboard動態填充頁面然后將頁腳的位置設定為relative將使頁腳粘在內容的底部，如果內容沒有填滿整個頁面，那么頁腳將不會粘在它的底部。
您可以在這里嘗試使用第一個答案：當內容不足或缺失時，如何將頁腳推到頁面底部？.
這個答案使用 flexbox 使頁腳粘在頁面底部，即使內容沒有填滿整個頁面。
uj5u.com熱心網友回復：
您還可以使用 flex，例如：
.App{
display: flex;
flex-direction: column;
justify-content: space-between;
min-height:100vh;
}
.dashboard{
padding: 10px;
min-height: calc(100vh - 12vh - 75px);
height: 200vh;
}
.monitoring-footer {
background-color: #014e8c;
height: 75px;
}
header {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
height: 12vh;
background-color: #014e8c;
}<div class="App">
<header style={{backgroundColor: '#014e8c'}}>
<h1 class="App-header">Tool</h1>
</header>
<div class="dashboard" style={{justifyContent: 'center', marginTop: '3vh'}}>
CONTENT
<!-- <SPDashboard/> -->
<!-- <CDashboard/> -->
</div>
<footer class="monitoring-footer" style={{backgroundColor: '#014e8c', marginTop: '45px', justifyContent: 'center'}}>
<p> footer</p>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
</footer>
</div>uj5u.com熱心網友回復：
據我了解您的問題，您希望在沒有內容或內容較少時將頁腳固定在底部，并在有相當多的內容時正常運行。您可以通過將以下代碼添加到包含footer,header和的父 div 來做到這一點content。您可以將頁眉和頁腳的高度調整為grid-template-rows: header 1fr footer;
.parent {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
uj5u.com熱心網友回復：
試試這個：你的身體內容增長，可能你沒有考慮到你的頁腳的高度。
.dashboard {
margin-bottom: 75px;
}
/* 75px or the footer heigh value. A better way to do this could be: */
body {
height: calc(100%-75px);
}轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/428398.html