Слетает верстка при нажатии на якорь

Question

Задача: сверстать шаблон, у которого в бэкграунде косые линии + такие же косые границы у шапки и подвала. С задачей вроде справился, но обнаружил баг, что если нажать на якорь (sec1,sec2...), то верстка слетает (Обратите внимание на header и footer до и после клика).

Почему это происходит? И какие есть варианты решения задачи или мб нужен вообще дургой подход?

Как я понял это происходит из-за

html{ overflow:auto;} body{ overflow:hidden;}

Но без этого я не знаю как "утопить" нижнюю границу футера.

html{
  overflow:auto;
  padding:0px;
  margin:0px;
}
body{
  padding:0px;
  margin:0px;
  overflow:hidden;
}
header{
  transform: skewY(-2deg);
  margin-top:-50px;
}
footer{
transform: skewY(-2deg);
margin-bottom:-50px;
}
header .noshow, footer .show{
  width:100%;
  background: #00f;
  height:100px;
}
header .show, footer .noshow {
  width:100%;
  background: #0f0;
  height:100px;
}
section{
  transform: skewY(-2deg);
  width:100%;
  height:300px;
  background:#f00;
  margin-bottom:20px;
}
nav{
  transform: skewY(-2deg);
  display:flex;
}
nav a{
  margin-left:10px;
}

<html>
<body>
<header>
<div class="noshow"></div>
<div class="show"></div>
</header>
<nav>
<a href="#sec1">sec1</a>
<a href="#sec2">sec2</a>
<a href="#sec3">sec3</a>
<a href="#sec4">sec4</a>
<a href="#sec5">sec5</a>
</nav>
<main>
<section id="sec1">1</section>
<section id="sec2">2</section>
<section id="sec3">3</section>
<section id="sec4">4</section>
<section id="sec5">5</section>
</main>
<footer>
<div class="noshow"></div>
<div class="show"></div>
</footer>
</body>
</html>

БЛОГ НА HUSL

Слетает верстка при нажатии на якорь

Ответы (0 шт):