Отрицательная маржа работает нормально, но не выполняет то, что вы ожидаете.отрицательное поле-дно не заставит элемент двигаться наружу.Вместо этого родительский элемент будет сокращаться.
Вот упрощенный пример:
.box {
border:5px solid #000;
}
.box div{
background:red;
height:200px;
margin-bottom:-50px;
}
<div class="box">
<div></div>
</div>
Как вы можете видеть, родительский элемент имеет высоту меньше, чем его дочерний элемент из-за отрицательного поля, и у нас переполнение.
Этоэто то, что происходит в вашем случае, и, поскольку переполнение является прокруткой по умолчанию, вы будете продолжать видеть нижний колонтитул.Добавьте границу, и вы увидите:
body {
background: white;
margin: 0;
border:2px solid;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -50px;
}
<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
Чтобы скрыть переполняющуюся часть, просто настройте свойство переполнения, и у вас будет то, что вы хотите:
html {
overflow:auto;
}
body {
background: white;
margin: 0;
border:2px solid;
overflow:hidden;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -200px;
}
<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
Как вы можете видеть, я добавил больший отрицательный предел, чтобы уменьшить элемент body и сделать нижний колонтитул снаружи, тогда я скрываю его, используя overflow:hidden