Спасибо, я решил мою с вашей помощью, немного подправив, так как я хочу, чтобы 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;
на тег видео.