0

像往常一样，我的 Internet Explorer 和 CSS 有问题。我正在使用 GWT 一个 DockPanel 来创建一个带有页眉、主要部分和页脚的网站，所有 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 页面。

请在此处查看实时示例。

谢谢

4

2 回答 2

2

您正在设置 100%VerticalPanel中间的高度DockLayout，但您没有将中间单元格高度设置为 100%。尝试：

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

无论如何，使用表格和百分比可能会导致您经常需要自己处理的微妙问题。总是问自己“100% 什么？”。

此外，从以下引用 javadoc DockPanel：

此小部件在标准模式中具有在怪癖模式中不存在的限制。DockPanel 中包含的子小部件不能使用百分比来调整大小。将子部件的高度设置为 100% 不会导致子部件填充可用高度。

如果您需要解决这些限制，请改用 DockLayoutPanel，但要了解它不是此类的替代品。它需要标准模式，并且最容易在 RootLayoutPanel（与 RootPanel 相对）下使用。

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

Layout正如 javadoc 所建议的，还尝试考虑使用基于 - 的方法。由于您对整个页面（that）使用单个 div rootContainer，因此使用起来应该很轻松。请参阅https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels#LayoutPanels。

于 2013-04-09T13:15:02.873 回答
0

不要混淆布局面板和非布局面板。如果您使用的是布局面板，则不要使用垂直面板和绝对面板。查看这个问题及其接受的答案以获取更多详细信息。

于 2013-04-09T19:13:51.297 回答