html - 页脚不会移动到页面底部

标签 html css

今天我一直在尝试设计一个页脚,我一直在尝试通过 CSS 来实现,但无论我如何尝试,它都不会移动到底部。这是我目前拥有的:

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: red;
}
<div id="footer">
  <p>TEST TEKST</p>
</div>

这是结果:

enter image description here

最佳答案

试试这个

body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
}

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 50px;
}
<body>
  <div id="footer"></div>
</body>

关于html - 页脚不会移动到页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52422485/

相关文章:

css - 为什么这个 div 会有一个不必要的大计算高度?

html - 如何从文件路径创建 Html 图像源?

html - 如何使用 Bootstrap 连续在图像上制作文本?

javascript - 如何将 css 类添加到 react 中的组件?

css - flexbox:在 Safari 中垂直分布元素

javascript - 将图标添加到 Angular Material 输入

javascript - 简单图像幻灯片上的随机动画

html - 使用套接字创建一个简单的网络服务器

javascript - jQuery 格式日期最小和最大日期 jQuery UI

css - 未显示背景图像