@Serge999111

Как сверстать центральный блок с отступами так, чтобы он не выходил за рамки 100% высоты?

611b6b3bed336767949176.jpeg

Есть верхний и нижний блок, по 100px высоты.

Общая высота родительского блока 100%.

А центральный блок как бы должен быть 100% высоты - (200px+200px) . то есть при увеличении и уменьшении высоты он должен быть от нижнего до верхнего блока.

Скролл не должен появляться.
  • Вопрос задан
  • 54 просмотра
Решения вопроса 1
miraage
@miraage
Старый прогер
<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="container">
      <div class="header"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

<code lang="css">
body {
  font-family: sans-serif;
  margin: 0;
}

.container {
  height: 100vh;
}

.header {
  height: 100px;
  background-color: red;
}

.content {
  height: calc(100% - 200px);
  background-color: green;
  overflow: hidden;
}

.footer {
  height: 100px;
  background-color: blue;
}

</code>
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы