Question

我有一个粘在底部的粘性页脚，但问题是正文中的内容和页脚重叠。

我目前将我的html，body和main设置为高度100％/ min-height：100％，但我的页脚位于绝对位置左侧：0和底部：0。问题是，我有我的背景图像位于我的主要底部，它重叠在定位的绝对页脚上。

我也尝试过不让我的页脚绝对定位并且主要高度为100％，这样可以正常工作，但我必须向下滚动才能看到页脚。为什么页脚被推得太大以至于我需要向下滚动？我希望页脚完全位于页面底部，而不必向下滚动以查看它。

<html>
   <body>
     <main>
       <div>Contents here</div>
     </main>
     <footer/>
   </body>
</html>


html, body, main {
   height: 100%;
}
.content {
    background-repeat: no-repeat;
    background-position-y: 100%;
    background-position-x: center;
    background-size: 1000px;
}

Answer 1

这是有效的粘性页脚代码。您可能希望使用此布局来解决您的问题。

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}
.content {
  padding: 20px;
  min-height: 100%;
  margin: 0 auto -50px;
}
.footer,
.push {
  height: 50px;
}

＆＃13;

<div class="content">
  <h1>Sticky Footer with Negative Margin 1</h1>
  <p><button id="add">Add Content</button></p>
  <div class="push"></div>
</div>

<footer class="footer">
  Footer 
</footer>

＆＃13;

底部粘性页脚没有身体重叠的内容

1 个答案: