Question

我的页面上有一个底部粘性页脚，但它重叠了我的内容。这是一种解决这个问题的方法，而不必为页脚设置一个特定的高度，并在html，body中设置相同的高度？

指向我网站的链接：https://www.rajohan.no/index.php?page=movie&category=comming

Answer 1

您的内容框ID也占据了页脚的空间，可能会调整它的高度有帮助

Answer 2

如果您在#content

上使用这些样式

display: flex;
flex-direction: column;
max-height: 100vh;

只有#content_box可滚动

Answer 3

如果您的#content_box设置为在页眉后面占据页面的其余部分，并且#bottom设置为位于页面底部，那么它将重叠，如您所见。

我解决这个问题的最佳方法是为#bottom分配这么多空间，如果您担心可扩展性，可以按百分比来完成。

除此之外，您可以尝试：

#content_box {
    background-color: #ffffff;
    min-width: 100%;
    min-height: 75vh;
    text-align: center;
    padding-top: 20px;
    overflow-y: auto;
    display: inline-block;
    }
#bottom {
    background-color: #4d4d4d;
    min-width: 100%;
    padding-bottom: 5px;
    border-top: 1px solid #e87f29;
    color: #efefef;
    text-align: center;
    /* position: fixed; */
    bottom: 0;
    display: inline-block;
}

另外，请注意您的页面不会滚动：）

底部粘性页脚重叠内容

3 个答案: