HTML/CSS 页脚从页面中间开始，然后移动到底部
Posted
技术标签:
【中文标题】HTML/CSS 页脚从页面中间开始，然后移动到底部【英文标题】：HTML/CSS Footer starts at middle of page then moves to bottom 【发布时间】：2021-03-28 17:10:58 【问题描述】：我遇到了一个问题，我的页脚从页面中间开始，然后移动到页面底部。这不是动画，它更多的是在页面中间加载页脚（当它这样做时，它被放置在我将其切断的任何图像或文本上方），消失，然后重新出现在它所在的页面底部有意的。
.footer
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
color: gray;
text-align: center;
<div class="footer">
Dan Garofalo © 2020
</div>提前致谢。
【问题讨论】：
你在什么设备上测试？ 我正在我的桌面上进行测试。我已经在 Chrome 和 Edge 中对此进行了测试。出现同样的问题。 【参考方案1】：html
position: relative;
min-height: 100%;
body
margin: 0 0 100px;
.footer
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
color: gray;
text-align: center;
<div class="footer">
Dan Garofalo © 2020
</div>【讨论】：
我遇到了同样的问题。我现在假设我的问题是我的 CSS 文件中的某些内容导致了这种情况发生？【参考方案2】：问题是动画中缺少标签。我解决了我的问题。感谢所有花时间帮助我的人。
【讨论】：
【参考方案3】：如果您使用position: absolute，请确保页脚的父元素是<body> 标签。如果您的页脚元素最终位于一个非主体元素内并且该元素具有position: relative，那么您的页脚将位于该元素内。示例：
<html>
<body>
<div class="parent">
<div class="child">test</div>
</div>
</body>
</html>
.parent
background-color: gray;
width: 200px;
height: 200px;
position: relative;
.child
background-color: blue;
width: 100px;
height: 100px;
position: absolute;
right: 0;
bottom: 0;
left: 0;
在上面的示例中，.child 将定位在 .parent 内。
为避免这种情况，最好使用position: fixed 作为您的页脚。这将意味着：
.child
background-color: blue;
width: 100px;
height: 100px;
position: fixed;
right: 0;
bottom: 0;
left: 0;
【讨论】：
以上是关于HTML/CSS 页脚从页面中间开始，然后移动到底部的主要内容，如果未能解决你的问题，请参考以下文章