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

google1

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

У меня снова проблема. У меня есть заголовок и холст, которые я хочу соединить внутри окна устройства. Все отлично выглядит в других браузерах, за исключением, наверное, 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%, а высота тела ВСЕГДА рассматривается как минимальная высота.

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

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

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

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

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

Mephistophel

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

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

Я знаю, что это противоречит большей части того, что я обычно говорю, но 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.10.2024, 18:10
Отображение сайта на Андроиде	19.10.2024, 18:10
Нужна базовая помощь со стилями и раскраской текста.	19.10.2024, 18:10
CSS-резервные варианты — пустая трата времени?	19.10.2024, 18:10
Элемент div отстает от другого, несмотря на то, что он расположен спереди.	19.10.2024, 18:10
Раздел отправки сообщений в стиле форума — веб-сайт WordPress	19.10.2024, 18:10
поместить изображение в поле таблицы	19.10.2024, 18:10
Нужна помощь в запуске моей веб-страницы	19.10.2024, 18:10
Как создать файл bookmarks.html с автоматическим стилем?	19.10.2024, 18:10
Есть идеи, как сохранить этот текст статическим	19.10.2024, 18:10

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

google1

kitty1

Mephistophel

DimixeR

I AM

Интересно