css - IE GWT: DockPanel 中央コンポーネント 100% 高さスタイルは無視されます

Question

いつものように Internet Explorer と CSS に問題があります。GWT で DockPanel を使用して、ヘッダー、メイン パーツ、フッターを含む Web サイトを作成しています。すべての VerticalPanels で、実行時にさまざまなコンポジット/要素を追加します。

    RootPanel rootPnl = RootPanel.get("rootContainer");

    final DockPanel dockPanel = new DockPanel();
    dockPanel.setWidth("100%");
    dockPanel.setHeight("100%");

    rootPnl.add(dockPanel);

    final VerticalPanel headerPanel = new VerticalPanel();
    headerPanel.setSpacing(10);
    headerPanel.setStyleName("gwt-HeaderPanel");
    dockPanel.add(headerPanel, DockPanel.NORTH);
    dockPanel.setCellHeight(headerPanel, "100px");

    final VerticalPanel mainPanel = new VerticalPanel();
    mainPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
    mainPanel.setStyleName("gwt-MainPanel");
    dockPanel.add(mainPanel, DockPanel.CENTER);

    final VerticalPanel footerPanel = new VerticalPanel();
    dockPanel.add(footerPanel, DockPanel.SOUTH);
    dockPanel.setCellHeight(footerPanel, "150px");

ご覧のとおり、CSS スタイルを追加しました。メインパネルは次のようになります。

.gwt-MainPanel {
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: #353334;
    -moz-box-shadow: 0 2px 2px 0px #232323;
    -webkit-box-shadow: 0 2px 2px 0px #232323;
    box-shadow: 0 2px 2px 0px #232323;
}

そのため、高さを中央のセルの 100% に設定しました。これは Firefox では意図したとおりに機能しますが、Internet Explorer はそれを完全に無視しています。IE を DockPanel の中央部分も垂直に埋めるにはどうすればよいですか? 私はすでにそれを検索し、たとえば異なる DOCTYPE を html ページに追加しようとしました。

実際の例については、こちらをご覧ください。

ありがとうございました