Спасибо, я решил мою с вашей помощью, немного подправив, так как я хочу, чтобы div 100% ширина 100% высоты (меньше высота нижней панели) и не было прокрутки на теле (без взлома / скрытия полос прокрутки).
Для CSS:
html{
width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
body{
position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
div.adjusted{
position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
}
div.the_bottom_bar{
width:100%;height:31px;margin:0px;border:0px;padding:0px;
}
Для HTML:
<body>
<div class="adjusted">
// My elements that go on dynamic size area
<div class="the_bottom_bar">
// My elements that goes on bottom bar (fixed heigh of 31 pixels)
</div>
</div>
Это помогло, да, я поставил значение немного больше на div.adjoted для bottom, чем для высоты нижнего бара, в противном случае появляется вертикальная полоса прокрутки, я настроен на ближайшее значение.
Это различие заключается в том, что один из элементов в динамической области добавляет дополнительную нижнюю дыру, от которой я не знаю, как избавиться ... это видео-тег (HTML5), обратите внимание, я поставил этот видео-тег с этот css (так что нет никаких оснований для того, чтобы сделать нижнее отверстие, но это так):
video{
width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
Цель: иметь видео, которое занимает 100% размера браузера (и динамически изменяет размер при изменении размера браузера, но без изменения соотношения сторон), за исключением нижнего пространства, которое я использую для div с некоторыми текстами, кнопками и т. Д. (и валидаторы w3c & css конечно).
РЕДАКТИРОВАТЬ: Я нашел причину, видео тег похож на текст, а не элемент блока, поэтому я исправил это с помощью этой CSS:
video{
display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
Обратите внимание на display:block;
на видео теге.