html - 使页脚不与内容重叠

Question

我在这里有 2 个复杂问题，首先是我如何确保页脚不与我的文章内容重叠。现在它似乎与它上面的东西重叠了，我似乎无法用 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 位于).