html - 页脚 Div 没有延伸整个 Div 的长度

Question

我正在尝试为我的简单网页创建一个页脚，但在处理超出容器边缘的元素时遇到了一些问题。我认为这是宽度的问题。

我正在尝试获取 <hr> 标记以扩展列的整个宽度。作为引用，我为容器、行和列使用了 MaterializeCSS 框架。

---

代码

HTML:

<div class="container">
  <div class="row"><!-- Other Content --></div>
  <div class="row"><!-- Other Content --></div>
  <div class="row"><!-- Other Content --></div>
  <div class="footer-message">
    <hr>
    Made with <span style="color: #e25555;">&hearts;</span> by Adam
  </div>
</div>

CSS:

.footer-message{
  position:absolute;
  width: 100%;
  padding:5px;
  bottom:0px;
}

我使用绝对位置来使其与屏幕底部对齐，并将宽度设置为 100%，因为我知道它将继承父级的宽度，在本例中为 div类为 container 。

我做错了什么？提前致谢!

编辑:旧截图

Answer 1

在容器中添加position: relative，然后添加left: 0;右:0 到 footer-message 类。希望对你有帮助