Почему контент налазит на footer? Как исправить?

Question

[ArturPetrov]

Прилепил footer к низу странцы, а когда создал большие посты он вместо того чтобы увеличить длину страницы (в body задал height: auto) подлез под footer. Вот так:


А вот часть кодa:

.post1{
    background:red;
    width:600px; 
    height:500px;
    float:left;
    margin-left: 10px;
    font-size: 30px;
    color:white;
}

.post2{
    background:green;
    width:600px; 
    height:500px;
    float:left;
    margin-left: 10px;
    font-size: 30px;
    color:white;
}

.post3{
    background:blue;
    width:600px; 
    height:500px;
    float:left;
    margin-left: 10px;
    font-size: 30px;
    color:white;
}

.post4{
    background:yellow;
    width:600px; 
    height:500px;
    float:left;
    margin-left: 10px;
    font-size: 30px;
    color:white;
}


/*FOOTER*/
.footer {
    width:100%;
    height: 70px;
    background: black;
    color:white;
    position: absolute;
    bottom: 0;
}

Comments

[Andrey Vasilev]

position: absolute?

[Andrey Vasilev]

Относительно чего позиционируешь?

[ArturPetrov]

Andrey Vasilev, а как тогда прилепить footer к низу страницы?

[Andrey Vasilev]

ArturPetrov,
min-height: calc(100vh - 80px)
80px - высота футера

Answer 1

[Rustam Bainazarov]

Как прижать подвал к низу страницы и при этом оставить событие scroll работоспособным?