У меня есть блок 'header' с фиксированной высотой - 800px. Внутри этого блока есть дочерний блок - image. Когда я задаю блоку image свойство height: 100%, то он должен растягиваться на высоту 800px, но он растягивается на высоту монитора, может это из-за bg-image?
Мой код:
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
.header {
width: 100%;
height: 800px;
.image {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
background-image: url("/img/header_bg.png");
background-repeat: no-repeat;
background-position: center 0px;
}
.content {
width: 100%;
height: 100%;
display: flex;
// .left {
// background-image: url(/img/header_bg_left.png);
// }
// .right {
// background-image: url(/img/header_bg_right.png);
// }
}
}
}
<!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="./scss/style.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="image"></div>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</div>
</body>
</html>