100% высота в Firefox ведет себя как минимальная высота

Dor.nuk

Привет, ребята,

У меня снова проблема. У меня есть заголовок и холст, которые я хочу соединить внутри окна устройства. Все отлично выглядит в других браузерах, за исключением, наверное, Firefox. Как я могу это исправить?

 
<!DOCTYPE html>
<html><head>
 <meta name="viewport" content="ширина = ширина устройства, начальный масштаб = 1, минимальный масштаб = 1, масштабируемый пользователем = нет">
 <meta charset="UTF-8">
 <title>100% Height</title>
 <style>
 html, body {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 }
 body {
 position: relative;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 font-family: Arial, Helvetica, sans-serif;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 }
 h1 {
 text-align: center;
 }
 h1 a {
 font-size: 1em;
 }

 #top {
 width: 100%;
 }
 canvas {
 width: 100%;
 height: 100%;
 background: #000;
 }
 </style>
</head><body>
 <div id=top>
 <h1>
 <a href="#">Site Name</a>
 </h1>
 </div>
 <canvas></canvas>
</body></html>

Код (разметка): Заранее спасибо,

Kitty1

Вы устанавливаете все дочерние элементы тела как гибкие контейнеры, поскольку вы сделали гибкие контейнеры тела, гибкие контейнеры автоматически подстраиваются под высоту их родителя, и у вас установлена высота тела на 100%, а высота тела ВСЕГДА рассматривается как минимальная высота.

. Должно вести себя так же и в любом другом браузере. Учитывая то, что вы настраиваете, я не совсем уверен, чего именно вы пытаетесь достичь.

Обычно, если вам нужно что-то вроде сохранения аспекта для холста, вам нужно сделать это в своем сценарии холста.

что, я подозреваю, вы могли бы сделать стремиться.

(хотя это дикая догадка). В значительной степени, насколько я могу судить, он делает именно то, что вы ему сказали.

и не совсем ясно дал понять, что вы ХОТИТЕ, чтобы он делал.

Qiml0keb

Я бы НЕ пытался сделать это со стороны страницы.

Вы не знаете, как аспект повлияет на ваши расчеты холста, вам, вероятно, понадобится сохранение аспекта - и это в конечном итоге приведет к такому большому количеству математических вычислений, что я бы на самом деле выбрал размер холста на основе сценария.

Я знаю, что это противоречит большей части того, что я обычно говорю, но CANVAS служит законной цели только тогда, когда работает JavaScript, и именно это, на мой взгляд, делает его исключением.

(... и заставляет меня задаться вопросом, почему у него вообще есть тег! В спецификации HTML это не имеет значения!!!) С этой целью я обычно даже не добавляю CANVAS в разметку, потому что я не помещаю в свою разметку только элементы сценариев.

Если это служит цели только тогда, когда работает JavaScript, ИМХО, с самого начала он не имеет никакого отношения к вашему HTML! ... и это не значит, что вашему сценарию в любом случае не придется перехватывать window.onresize.

И вам также придется активно извлекать размер элемента холста, чтобы он знал, с какой большой областью он работает; что может также включать или не включать создание нового контекста в случае изменения этих ценностей.

DimixeR

Спасибо за предложение, Проще говоря, мне нужна страница с полноэкранной высотой, липким нижним колонтитулом и без полосы прокрутки.

Все умещается внутри и не выходит за пределы высоты окна просмотра, все делается без использования стека слоев.

Он работает, как и ожидалось, в Chrome и других браузерах (включая IE 10+), но в Firefox.

Я хочу, чтобы заголовок и холст плотно прилегали друг к другу в любом окне просмотра.

Это можно сделать так:

 
#top {
 height: 30px;
 width: 100%;
}
canvas {
 width: 100%;
 height: 100%;
 background: #000;
 height: -moz-calc(100% - 30px);
}

Код (разметка): А как в em посчитать?

Спасибо,

Похожие темы	Дата
Почему Лебедев?	19.12.2024, 05:12
Учебник по Adobe Illustrator CS2	19.12.2024, 05:12
Тема для заказчиков	19.12.2024, 05:12
Отслеживание покупок через PayPal – Лотерейные билеты – Сбор средств	19.12.2024, 05:12
CSS-таргетинг для мобильных устройств	19.12.2024, 05:12
Помогите интегрировать CSS-анимацию в заголовок.	19.12.2024, 05:12
Ищу бесплатный хостинг блогов для взрослых.	19.12.2024, 05:12
Как стать лучше в дизайне?	19.12.2024, 05:12
Встроенная вертикальная полоса прокрутки	19.12.2024, 05:12
Снова нужна помощь. . . Над моей головой	19.12.2024, 05:12

100% высота в Firefox ведет себя как минимальная высота

Dor.nuk

Kitty1

Qiml0keb

DimixeR

I AM

Интересно