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

SlovoGeroina

Вот что я пытаюсь сделать:

 


<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. Спасибо,

Cherry26

Вы имеете в виду, что хотите оставить этот блок внизу, в то время как все остальное может иметь адаптивную высоту? Одним из способов может быть что-то вроде:

 

.bottom {

flex-shrink: 0;

height: 50px;

position: absolute;

bottom: 0;

left: 50%;

margin-left: -20px;

}

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

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

Похожие темы	Дата
Пожалуйста, помогите мне с моим HTML/CSS/JavaScript! (Параллакс-прокрутка)	19.10.2024, 18:10
4175 просмотров страниц за день с использованием одной техники (бесплатная раздача)	19.10.2024, 18:10
Предложения по новым темам блога	19.10.2024, 18:10
ютуб с ценой за конверсию	19.10.2024, 18:10
WordPress – Отправка формы – массовая отправка, частные ответы	19.10.2024, 18:10
Необходимо удалить метатег HTML с сайта WordPress.	19.10.2024, 18:10
Карусель «Гранки» на чистом CSS с нажатием клавиш?	19.10.2024, 18:10
Elementor/Другие плагины для перетаскивания	19.10.2024, 18:10
Что не так с этим дизайном сайта?	19.10.2024, 18:10
Все владельцы бизнеса должны знать эти 10 вещей, прежде чем создавать веб-сайт	19.10.2024, 18:10

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

SlovoGeroina

Cherry26

I AM

Интересно