html - 不同大小的容器被页脚覆盖

Question

我有一个我正在设计的结帐系统，我无法让页脚不吃掉我设置的底部 div，除非我不断调整底部边距数字。

我将三个 div 嵌套为一个。这些嵌套的 div 在我继续下一个时显示/隐藏。我唯一会遇到问题的是最后一个，因为它永远不会是静态的。我用它来显示客户订单，所以如果他们有 10 种不同的产品，则显示 10 张图片、名称、价格等。

我网站的每个其他区域都会添加新内容，页脚会响应并不断下降。

我的 fiddle 不是最好的，我的问题真的很难产生，因为它不是静态问题。可以添加两个产品，这样就可以了。

https://jsfiddle.net/pfar54/rc5yffy7/

    .footerOut {
    width: 100%;
    background-color: #202020;
    position: relative;
    padding-top: 30px;
    left: 0px;
    right: 0;
    margin-bottom: 0px;
    bottom: 0px;
    clear: both;
}
.footer {
    height: 420px;
    width: 960px;
}
/*----------Main div for Checkout Process--------*/
.checkoutprocess {
    margin-bottom: 150px;
    display: relative;
}

我已将所有内容设置为相对...添加的填充:底部(将其取出，因为它没有做任何事情)。我尝试的一切都无济于事。

容器和边框的高度无关紧要，因为我只是用它们来测试。

有人知道为什么吗？

Answer 1

我猜你的问题是页脚与内容重叠，我发现一些 Html Dom 结构问题和 css 属性错误，我已经清理了你的代码，请在评论中验证下面的链接