DockPanel中心组件100%高度样式被忽略

和往常一样，我在使用ie和CSS时遇到了一个问题。我正在使用GWT DockPanel创建一个网站，有一个标题，一个主要部分和一个页脚，所有的垂直面板，我在运行时添加不同的复合材料/元素。

    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的中心部分也垂直?我已经搜索了它，并尝试例如向html页面添加不同的DOCTYPEs。

请查看这里的实际示例。

谢谢

您将VerticalPanel的高度设置为DockLayout中间的100%，但您没有将中间单元格高度设置为100%。试一试:

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

无论如何，使用表格和百分比会导致一些微妙的问题，这些问题通常需要你自己处理。总是问自己"百分之百是什么"。

同时，引用DockPanel中的javadoc:

这个小部件在标准模式下具有在怪癖模式下不存在的限制。DockPanel中包含的子部件不能使用百分比来调整大小。将子部件的高度设置为100%不会导致子部件填充可用的高度。
如果你需要解决这些限制，使用DockLayoutPanel代替，但要明白它不是这个类的替代品。它需要标准模式，并且最容易在RootLayoutPanel(而不是RootPanel)下使用。

使用<!DOCTYPE html>将页面设置为标准模式，这意味着这将无法正常工作，并且在怪癖模式下，您必须自己进行实验。

还可以考虑使用基于Layout的方法，正如javadoc所建议的那样。由于整个页面使用单个div(即rootContainer)，因此使用起来应该很轻松。看到https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels LayoutPanels .

不要混淆布局面板和非布局面板。如果你正在使用布局面板，那么不要使用垂直面板和绝对面板。看一下这个问题和它被接受的答案，了解更多细节。

相关内容

最新更新

热门标签：