水平和垂直填充所有可用空間，使用div

我試圖實現沒有表格或JavaScript的以下佈局。水平和垂直填充所有可用空間，使用div

The layout

它基本上是桌面軟件的常見佈局。一些工具欄和中間的實際內容。我試圖在Web應用程序中複製佈局。

我需要所有的工具欄是靈活的和可選的。所以在一種狀態下，可能只有頂部的工具欄有3行圖標，而在另一種情況下，所有4個工具欄只有一小部分內容。

應用程序將使用文檔寬度/高度的100％，並且不能溢出。但是，中間的div溢出：auto並且應該在每個方向上縮放。可能會出現所有工具欄都隱藏的情況，然後中間div應該佔據整個文檔。

該應用程序需要JavaScript，根本不支持IE6，但我仍然在尋找一種跨瀏覽器的方式來使用CSS。

用表格做它非常簡單，乾淨，我知道如何用JavaScript做到這一點，但我多次遇到這個問題，並希望停止使用表格。

來源

2010-11-09 Removed_account

...您目前的代碼是？ – Sotiris 2010-11-09 13:54:05

我沒有當前的代碼。我通常用表格解決這個問題，因爲我不知道用div來做什麼工作。我可以創建一個固定的佈局示例，但我認爲我的問題中的圖像足以說明問題。 – 2010-11-09 13:57:30

它不能跨瀏覽器兼容。使用jQuery javascript插件：http://layout.jquery-dev.net/

來源

2010-11-09 13:55:14 jmav

這就是我所害怕的。任何方式與現代瀏覽器和CSS3做到這一點？ – 2010-11-09 14:11:37

也許在HTML 5中： http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/ http://www.net-kit.com/html5-css3-layout-tutorials-and-templates/ – jmav 2010-11-09 14:37:46

@jmav，我很好奇爲什麼這個*不能跨瀏覽器兼容*。我認爲這是一個延伸。我沒有看到OP中會讓我相信的東西，尤其是當IE6不需要支持時。 – 2010-11-09 16:15:18

水平和垂直填充所有可用空間，使用div

回答

相關問題