0

Только для body не задавать фиксированную высоту, она должна быть динамической, высота только container управляется.

Есть какой то надежный способ, чтобы везде работало?

canvas {
  width: 100%;
  height: 100%;
  border: 1px solid #f00;
}
.container {
  width: 300px;
  height: 100px;
  border: 1px solid #000;
}
.header {
  height: 20px;
  background: #3f3f3f;
  color: #fff;
}
.body {
  height: 100%;
}
<div class="container">
  <div class="header">Header</div>
  <div class="body">
    <canvas></canvas>
  </div>
</div

1
  • Что относительно чего должно быть динамичным, вопрос не понятен..
    – De.Minov
    31 дек 2021 в 8:51

1 ответ 1

0

Замените height на min-height

canvas {
  width: 100%;
  min-height: 100px;
  border: 1px solid #f00;
}
.container {
  width: 300px;
  min-height: 100px;
  border: 1px solid #000;
}
.header {
  height: 20px;
  background: #3f3f3f;
  color: #fff;
}
.body {
  height: 100%;
}
<div class="container">
  <div class="header">Header</div>
  <div class="body">
    <canvas></canvas>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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