布局主要部分由页脚覆盖

Question

我希望lorem临时部件将页脚进一步向下推至底部。但是如您所见，它被页脚：（。

我尝试了重叠方法，但是我不想滚动lorem ipsum部分。我也尝试了flexbox，但是没有用。请帮我拉头发：S。

https://jsbin.com/buyosiduyi/edit?html,css,js,output

CSS

footer{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    background-color: #292929;
    width: 100%;
    box-shadow: 5px 10px 70px 15px #888888;
    color: #f4f4f4;
    text-shadow: 1px 1px #020202;
    font-size: 15px;
    z-index: -1;
}

我希望页脚位于底部。

Answer 1

您可以更改＃body-part的CSS

#body-part{
    width: 100%;
    background-image: url("mainpage.jpg");
    background-position: bottom;
    position: relative;
    top: 0;
    bottom: 0;
    z-index: -1;
    margin-bottom:15px;
}

并从页脚中删除position:absolute;