Смоделируйте поведение таблицы "расширить на все оставшееся пространство" (заполнитель) с помощью div (я имею в виду высоту)

Question

Возможно ли то, что я указал в таблице, с помощью css3? В css2 вы не можете напрямую копировать это поведение, и это действительно скучно, вы должны сделать много обходных путей для того, что уже существует.

Вот изображение, над которым я работаю (изображение можно кликнуть для увеличения):

Я пытаюсь сделать эту темно-серую часть, чтобы заполнить все между двумя зелеными частями. Как это сделать?

Answer 1

Я нашел решение в интересной статье: http://www.dynamicdrive.com/style/layouts/item/css-top-and-bottom-frames-layout/

Я нашел эту ссылку отсюда: http://csscreator.com/node/11049

Важной частью является эта:

#framecontentTop, #framecontentBottom{
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 130px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#framecontentBottom{
top: auto;
bottom: 0; 
height: 110px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#maincontent{
position: fixed; 
top: 130px; /*Set top value to HeightOfTopFrameDiv*/
left: 0;
right: 0;
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto; 
background: #fff;
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

Особенно с использованием позиции: фиксированной и верхней: авто (никогда не использовал, я также не очень хорошо понимаю, что это значит).