html - 内容框不适合内容。无溢出消失:auto

Question

我的每个页面上的内容框都使用相同的 CSS，但是在一个页面上，内容框中有一个滚动条，而且页脚位置不正确。 这是因为我使用了 overflow:auto，但是当我删除 overflow:auto 时，内容框完全消失了。 (内容本身仍然存在)

我不确定问题出在哪里，因为它们都使用相同的 CSS，而其他页面工作正常。

这是我的内容框的 CSS

#contentProducts {
    background:rgba(255,255,255,0.6);
    width:80%;
    min-height:100%;
    overflow:auto;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:20px;
    box-shadow: 4px 4px 10px black;
}

页面上的内容只有 4 个带图片的框，这些框的 css 是

#clothingProduct {
    padding-top:40px;
    position:relative;
    background-position:center;
    background-size:cover;
    text-align:center;
    float:right;
    width:300px;
    height:140px;
    margin-right:12%;
    margin-top:60px;
    margin-bottom:30px;
}

这是我页脚的 CSS

#footer {
    float:left;
    bottom:0;
    position:static;
    background:rgba(255,255,255,0.6);
    width:100%;
    height:20px;
    color:black;
    margin:auto;
    overflow: hidden;
}

基本上，它应该看起来像这样(在其他页面上也是如此)

但在产品页面上，它看起来像这样

我有一个变通解决方案，仅涉及以像素为单位设置框的高度，但这仍然不能解决页脚位于错误位置的问题。

如果您需要更多信息，请告诉我，我们将不胜感激。

Answer 1

通常当我在这些方面遇到问题时，它与 HTML 中的拼写错误/错误有关。没有正确关闭标签或类似的东西，但如果没有相关的 HTML 就很难分辨。