0

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

我想要的只是一个在中间有一个页眉、一个页脚和一个 2x2 网格的应用程序。网格的两行应等高，左列应为 2/3 屏幕宽，右列应为 1/3 屏幕宽。该应用程序应在移动设备上全屏显示，并在桌面上的窗口内工作。当窗口大小/方向发生变化时，它应该重新应用布局。

在 WPF/Silverlight 中，这将遵循（抱歉语法丑陋）：

<网格>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="2*" />
       <ColumnDefinition Width="1*" />
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
       <RowDefinition Height="自动" />
       <RowDefinition Height="*" />
       <RowDefinition Height="自动" />
   </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" />
</网格>

是否有某种 JavaScript/CSS/任何库可以支持这样的事情？我查看了 JQuery.Mobile、Foundation 和其他一些东西，但它们似乎都存在 100% 高度的问题。例如，请参见此处：JQuery-Mobile content area 100% height between head and foot。

对不起，如果它是微不足道的/显而易见的。一个指向工作示例的指针将不胜感激。

4

1 回答 1

0

你可能想看看这些

  1. http://codepen.io/chriscoyier/pen/eGcLw
  2. http://codepen.io/tag/grid
于 2013-06-24T20:52:46.247 回答