Preenchendo todo o espaço disponível horizontalmente e verticalmente, com divs - html, css, layout

Estou tentando obter o seguinte layout sem tabelas ou JavaScript.

É basicamente o layout comum de software de desktop. Algumas barras de ferramentas e o conteúdo real no meio. Estou tentando reproduzir o layout em um aplicativo da web.

Preciso que todas as barras de ferramentas sejam flexíveis e opcionais. Portanto, em um estado pode haver apenas a barra de ferramentas superior com 3 linhas de ícones e, em outro caso, todas as quatro barras de ferramentas com apenas um pouco de conteúdo.

O aplicativo usará 100% dolargura / altura do documento e não deve transbordar. No entanto, a div no meio tem overflow: auto e deve ser escalonada em todas as direções. Pode haver um caso em que todas as barras de ferramentas estejam ocultas e a div do meio ocupe todo o documento.

O aplicativo requer JavaScript e não oferece suporte ao IE6, mas ainda estou procurando uma maneira entre navegadores de fazer isso com CSS.

É muito fácil e limpo fazer isso com uma tabela e eu sei como fazer isso com JavaScript, mas já me deparei com esse problema várias vezes e gostaria de parar de usar tabelas.

Respostas:

Não pode ser feito compatível com vários navegadores. Use o plugin jQuery javascript: http://layout.jquery-dev.net/