В примере внизу возникает разрыв ввиде черного цвета, назначенного тегу HTML. При этом контейнеру flexbox Body был назначен белый цвет и фон в этом месте должен быть белым. Почему возникает этот разрыв между основным блоком и футером? Как починить?
[Пример разметки
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
height: 100%;
background-color: black;
box-sizing: border-box;
}
body {
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: white;
}
.header {
background-color: #3E464F;
position: fixed;
width: 100%;
display: flex;
justify-content: center;
box-sizing: border-box;
height: 50px;
flex: 0 0 auto;
}
.h-limiter {
width: 1100px;
margin: 0 auto;
display: flex;
justify-content: space-between;
box-sizing: border-box;
}
.logo {
height: 100%;
width: 171px;
background-color: #3A4047;
}
.nav {
}
.user-menu {
height: 100%;
width: 52px;
background-color: #3A4047;
}
.subheader {
box-sizing: border-box;
// background-color: pink;
background-image: url(/source/images/bg.png);
width: 100%;
height: 50px;
display: flex;
flex: 0 0 auto;
}
.s-limiter {
box-sizing: border-box;
width: 1100px;
margin: 0 auto;
}
.subnav {
box-sizing: border-box;
height: 59px;
flex: 0 0 auto;
display: flex;
}
.sn-limiter {
box-sizing: border-box;
width: 1100px;
margin: 0 auto;
align-self: center;
}
.main {
background-color: white;
box-sizing: border-box;
align-items: center;
display: flex;
align-self: stretch;
align-content: center;
justify-content: center;
flex: 1 0 auto;
}
.m-limiter {
height: 600px;
width: 1100px;
background-color: whitesmoke;
box-sizing: border-box;
align-self: stretch;
}
.footer {
background-color: #3E464F;
box-sizing: border-box;
margin-top: 150px;
}
.f-limiter {
height: 250px;
width: 1100px;
margin: 0 auto;
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header class="header">
<div class="h-limiter">
<div class="logo"></div>
<div class="nav"></div>
<div class="user-menu"></div>
</div>
</header>
<section class="subheader"><div class="s-limiter"></div></section>
<section class="subnav"><div class="sn-limiter"><p>team > blog</p></div></section>
<main class="main"><div class="m-limiter"></div></main>
<footer class="footer"><div class="f-limiter"></div></footer>
</body>
</html>