如何防止页脚与 div 重叠？

Question

我正在创建一个 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@email.com">email@email.com</a></p> </footer> </div>

Answer 1

发生这种情况是因为您已将页脚的 position 设置为absolute ，这会导致它忽略元素流。

因为您说SPDashboard动态填充页面然后将页脚的 position 设置为relative将使页脚粘在内容的底部，如果内容没有填满整个页面，那么页脚将不会粘在它的底部。

您可以在这里尝试使用第一个答案： 当内容不足或缺失时，如何将页脚推到页面底部？ .

这个答案使用 flexbox 使页脚粘在页面底部，即使内容没有填满整个页面。

Answer 2

您还可以使用 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@email.com">email@email.com</a></p> </footer> </div>

Answer 3

据我了解您的问题，您希望在没有内容或内容较少时将页脚固定在底部，并在有相当多的内容时正常运行。 您可以通过将以下代码添加到包含footer 、 header和content的父 div 中来做到这一点。 您可以将 header 和页脚的高度调整为grid-template-rows: header 1fr footer;

  .parent {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

Answer 4

试试这个：你的身体内容增长，可能你没有考虑到你的页脚的高度。

 .dashboard { margin-bottom: 75px; } /* 75px or the footer heigh value. A better way to do this could be: */ body { height: calc(100%-75px); }

这里有很多方法