使页脚不与内容重叠

Question

我有两个问题，首先是如何确保页脚不与我的文章内容重叠。现在它似乎与它上面的东西重叠了，我似乎无法用 overflow: auto;

制作滚动条

此外，我该如何让 <hr> 标签工作，因为现在它似乎把我的整个 flexbox 搞得一团糟，它只悬停在第一个联系人页脚细节上方。

非常感谢您的帮助！！！

    #footer {
    position: absolute;
    left: 20%;
    bottom: 0%;
    width: 50%;
    height: 20%;
    display: flex;
    justify-content: space-between;
  }

  .contact_footer {
    margin-left: 20%;
    }

<footer>
    <div id="footer">
        <div class="container">
            <div class="contact_footer">
            <hr>
                <h3>Contact</h3>
                <address>
                info
                </address>
            </div>
            <div class="contact_footer">
                <h3>Address</h3>
                <address>   
                info
                </address>
            </div>
        </div>
    </div>      
</footer>

Answer 1

如果您绝对定位任何内容，它将从正常布局中删除。如果您不希望它与它下面的任何东西重叠，您需要确保它下面没有任何东西。这不是对页脚的调整，而是对内容的调整。

尝试这样的事情（选择器必须替换为你的）：

#content {
    margin-bottom: 20vh;
}

20vh 是屏幕高度的 20%，这可能是你的 footer 的大小（你的代码没有明确说明你的 footer 是什么元素位于).

Answer 2

做一件事，针对第二个问题

仅对第一个页脚内容使用伪 class ':first-child' css 并使用 'border-top' 样式属性而不是 'hr' 标签

.contact_footer:first-child address{border-bottom:1px solid black;}

使页脚不与内容重叠

Make footer not overlap content

html

css

footer