水平和垂直填充所有可用空间，使用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

回答

相关问题