Question

当窗口垂直调整大小时，如何将页脚粘贴到页面底部并防止其向上移动？当窗口的高度变小时，页脚应该消失。

此视频显示了页脚如何移动：https://vid.me/Lqk6。

问题是，当调整屏幕大小时，页脚可能会重叠某些内容。我该如何防止这种情况发生？

到目前为止我的页脚代码：

 #footer{
  bottom: 0px;
  position:fixed;
  height:50px;
  left: 0px;
  right:0px;
  margin-bottom:0px;
  background-color: black;
  color: white;
  text-align: center;

}
#wrapper{
  height: 1000px;
}

html,body {
  height: 100%;
}

<body>
	<div id="wrapper">
		<div id="footer">Footer</div>
	</div>
</body>

Answer 1

Sarmad Aijaz是正确的 - 固定定位导致问题。我想这会为你解决：

＆＃13;

 #footer {
    bottom: 0px;
    position: absolute;
    height: 50px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
    background-color: black;
    color: white;
    text-align: center;
}

#wrapper {
    height: 1000px;
    position: relative;
}

html,body {
    height: 100 % ;
}

＆＃13;

<body>
 <div id="wrapper">
    <div id="footer">Footer</div>
 </div>
</body>

＆＃13;

通过将#wrapper设置为position: relative;，我们确保#footer绝对定位相对于#wrapper （因为它是第一个非静态定位的父元素）。如果您希望它相对于文档，只需省略#wrapper元素的相对位置。

Answer 2

此解决方案依赖于用户设备的resoulosion。您可以使用@media属性配置它。

根据我的设备，我更改了2行，并且它的工作方式与您想要的一样：

顶部：580px; 位置：相对;

Answer 3

这是因为你的位置固定在#footer ...... 您可以将其更改为absolute或relative

Answer 4

如果你想将页脚保持在文本的底部（粘性页脚），但不要总是停留在屏幕的底部，你可以使用：position: relative;（保持页脚相对于页面的内容，而不是视图端口）和clear: both;（将使页脚不会占用其他内容）。

Answer 5

您可以尝试将正文内容放在要显示在中间的“主要”标签内，并将页脚保留在“页脚”标签内。 <body> <main> <header> bla bla bla </header> rest of the body contents </main> <footer> bla bla bla </footer> </body>

当我添加“ main”标签时，我也遇到了同样的问题。

当窗口垂直调整大小时，防止页脚移动

5 个答案: