javascript - 移动应用的简单网格布局？

我是一位经验丰富的桌面开发人员（MFC-＆gt; Win Forms-＆gt; WPF，一些GTK），他们试图使用HTML5 /移动开发。

我想要的是拥有标题，页脚和中间2x2网格的应用程序。两行网格应具有相同的高度，左列应为2/3屏幕宽，右列为1/3屏幕宽。该应用程序应在移动设备上全屏显示，并在桌面上的窗口内工作。当窗口大小/方向改变时，它应该重新应用布局。

在WPF / Silverlight中（对于丑陋的语法抱歉）：

<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>

是否有某种类型的JavaScript / CSS /支持这样的东西的库？我查看了JQuery.Mobile，Foundation和其他一些东西，但它们似乎都有100％高度的问题。例如。见这里：JQuery-Mobile content area 100% height between head and foot。

对不起，如果它是微不足道/显而易见的。非常感谢指向工作示例的指针。

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

1 个答案: