0

У меня есть блок '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>

2
  • 1
    a если не 100% а inherit? 17 мар в 18:18
  • @YummyCocktail, работает! Ответьте на вопрос, я помечу его как решение
    – syrex
    17 мар в 18:37

1 ответ 1

1

Задайте высоту .image не в процентах, а унаследуйте от родителя, вот так должен выглядеть ваш CSS

.image {
  width: 100%;
  height: inherit; /* Новое значение свойства height */
  position: absolute;
  z-index: -1;
  background-image: url("/img/header_bg.png");
  background-repeat: no-repeat;
  background-position: center 0px;
}
4
  • В CSS комментарии не начинаются на //...
    – ΝNL993
    18 мар в 8:47
  • Я в курсе, это лишь для наглядности, а не для копипаста) 18 мар в 15:16
  • А в чём проблема это скопировать и удалить лишнее? Это как ставить замок на открытую дверь. А чтобы было для "наглядности", нужно было оставить только это самое свойство.
    – ΝNL993
    18 мар в 15:28
  • я исправил представление комментария не дающее вам спокойно существовать) 18 мар в 15:43

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.