Как сохранить фиксированную нижнюю высоту для этого фрагмента кода

  • Автор темы Lukjanov
  • Обновлено
  • 12, May 2024
  • #1
Вот что я пытаюсь сделать:

 
<html>
<head>
 <style>
 body, html {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 }
 body {
 display: -webkit-flexbox;
 display: -ms-flexbox;
 display: flex;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 }
 #stage {
 width: 100%;
 height: calc(100% - 65px);
 background: #BAD;
 }
 .bottom {
 flex-shrink: 0;
 height: 50px;
 text-align: center;
 }
 </style>
</head>
<body>

 <canvas id=stage></canvas>

 <div class=bottom>
 BOTTOM BOTTOM BOTTOM
 </div>

</body>
</html>


Код (разметка): Нижний блок подстраивается под высоту холста. Я хочу, чтобы это исправили. Я бы динамически менял высоту холста с помощью JavaScript.

Спасибо,

Lukjanov


Рег
09 Oct, 2005

Тем
77

Постов
196

Баллов
621
  • 10, Jun 2024
  • #2
Вы имеете в виду, что хотите оставить этот блок внизу, в то время как все остальное может иметь адаптивную высоту? Одним из способов может быть что-то вроде:

 
 .bottom {
 flex-shrink: 0;
 height: 50px;
 position: absolute;
 bottom: 0;
 left: 50%;
 margin-left: -20px;
 }


Код (разметка): https://jsfiddle.net/Lnxj2ct8/3/

(Я уменьшил высоту #stage до 80%).
 

Cherry26


Рег
16 Jun, 2013

Тем
77

Постов
233

Баллов
628
Тем
403,760
Комментарии
400,028
Опыт
2,418,908

Интересно