Javascript 移动应用程序的简单网格布局？

我是一名经验丰富的桌面开发人员（MFC->Win Forms->WPF，一些GTK），尝试使用HTML5/移动开发

我想要的是有一个应用程序，它有一个头，一个页脚，中间有一个2x2网格。两行网格的高度应相等，左栏应为屏幕宽度的2/3，右栏应为屏幕宽度的1/3。该应用程序应该是全屏幕的移动和工作在桌面上的窗口。当窗口大小/方向改变时，应重新应用布局

在WPF/Silverlight中，这将遵循以下原则（抱歉，语法太难看）：

是否有某种JavaScript/CSS/which库支持类似的东西？我看了jQuery、Mobile、基金会以及其他一些东西，但它们似乎都有100%个高度的问题。例如，请参见此处：

---

如果这是琐碎的/显而易见的，我很抱歉。如果您能提供一个工作示例的指针，我们将不胜感激。

您可能想看看这些示例

---

定义“移动”吗？320像素中的2/3（入门级智能手机的基本宽度）和780像素中的2/3（入门级平板电脑）截然不同。这只是两个例子；视网膜显示会让情况变得更糟…好的观点。然而，我主要关注的是网格布局。一旦有了基本的网格布局，您就可以对其进行优化，例如，如果方向是垂直的，则将其设置为2/3高度，等等。204项。陛下2.它支持100%的高度吗？我相信你能找到一个。这里有很多例子 <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="2*" /> <ColumnDefinition Width="1*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <my:Header Grid.Row="0" Grid.Column="0" Grid.ColSpan="2" /> <my:Footer Grid.Row="2" Grid.Column="0" Grid.ColSpan="2" /> <my:Section11 Grid.Row="1" Grid.Column="0" /> <my:Section12 Grid.Row="1" Grid.Column="1" /> <my:Section21 Grid.Row="2" Grid.Column="0" /> <my:Section22 Grid.Row="2" Grid.Column="1" /> </Grid>