IE瀏覽器GWT：DockPanel中心組件100％高度風格被忽略

我像往常一樣的問題與Internet Explorer和CSS。我正在使用GWT DockPanel創建一個網站，其中包含一個標題，一個主要部分和一個頁腳，所有VerticalPanels在運行時添加不同的複合材料/元素。IE瀏覽器GWT：DockPanel中心組件100％高度風格被忽略

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頁面。

請看一看here爲活的例子。

謝謝

來源

2013-04-09 Blakhar

嘗試爲DocoratorPanel指定特定高度而不是100％。 – JAVAC 2013-04-09 12:05:26

@SCK我試過'dockPanel.setHeight（Window.getClientHeight（）+「px」）;'，但它沒有其他結果。如果使用IE開發人員工具查看頁面，可以看到dockPanel的高度爲100％，但MainPanel不填充中心單元格。 – Blakhar 2013-04-09 12:12:05

您設置在DockLayout中間的VerticalPanel的100％的高度，但你是不是也該中間單元格高度設置爲100％。嘗試：

dockPanel.setCellHeight(mainPanel, "100%");

無論如何，使用表格和百分比可能會導致您需要自行處理的細微問題。總是問自己「100％是什麼？」。

此外，從DockPanel引述的Javadoc：

這個小工具在標準模式沒有怪癖模式存在侷限性。包含在DockPanel中的子部件不能使用百分比來確定大小。將子窗口小部件的高度設置爲100％不會導致孩子填充可用高度。

如果您需要解決這些限制，請改爲使用DockLayoutPanel，但要明白它不是此類的替代品。它需要標準模式，並且最容易在RootLayoutPanel（而不是RootPanel）下使用。

使用<!DOCTYPE html>以標準模式設置頁面，這意味着這將無法正常工作，並且在怪癖模式下，您必須自己嘗試。

嘗試使用基於Layout的方法，正如javadoc所建議的那樣。由於您在整個頁面上使用了一個div（即rootContainer），因此使用它應該很輕鬆。見https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels#LayoutPanels。

來源

2013-04-09 13:15:02

感謝您的回覆。當我使用DockLayoutPanel和RootLayoutPanel時，我遇到了問題，整個頁面沒有滾動條。請注意，該中心有一個固定的大小。如果我在窗口重新調整大小時設置了中央單元格的大小，那麼編碼是不是很糟糕？或者是有一個更好的解決方案，有一個固定的頁腳/標題大小和中心有一個最小的大小，但應填補其餘？ – Blakhar 2013-04-09 14:39:26

是的，'RootLayoutPanel'意味着整個頁面，並跟蹤瀏覽器調整大小事件，並相應地將它們提供給DOM，因此根本沒有滾動條。我通常避免混用和匹配基於表格的小部件，嘗試用簡單的'FlowPanel'和一些CSS替換'VerticalPanel's。對不起，沒有更精確的，但我甚至不能重現這個問題。 – 2013-04-09 16:42:45

即使我刪除了'VerticalPanel'，只需添加一個'Composite'來保存'AbsolutePanel'，中心組件的高度就不正確。我想知道是因爲對DockPanel的描述是這樣說的：「一個將它的子部件放在外面的面板」停靠「在它的外邊緣，而**允許它的最後一個部件佔據其中心的剩餘空間* *「。 – Blakhar 2013-04-09 17:18:04

不要混淆版面面板和非版面面板。如果您正在使用佈局面板，則不要使用垂直面板和絕對面板。看看這個question及其接受的答案瞭解更多詳情。

來源

2013-04-09 19:13:51

IE瀏覽器GWT：DockPanel中心組件100％高度風格被忽略

回答

相關問題