1

我试图在 Google 的 Web Toolkit 中找到自己的出路。所以我想制作一个 100% 高度和 100% 宽度布局的小页面。我想要没有边距、没有填充和没有滚动条。

我使用了 DockPanel 并将其添加到页面中，如下所示：

package de.kuntze.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.HasAlignment;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

public class BeginningGWT_BookExample implements EntryPoint {
  public void onModuleLoad() {
    DockPanel mainPanel = new DockPanel();
    mainPanel.setBorderWidth(5);
    mainPanel.setSize("100%", "100%");
    mainPanel.setVerticalAlignment(HasAlignment.ALIGN_MIDDLE);
    mainPanel.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);

    Widget header = new Label("Header");
    mainPanel.add(header, DockPanel.NORTH);
    mainPanel.setCellHeight(header, "30px");

    Widget footer = new Label("Footer");
    mainPanel.add(footer, DockPanel.SOUTH);
    mainPanel.setCellHeight(footer, "25px");

    Widget categories = new Label("Categories");
    mainPanel.add(categories, DockPanel.WEST);
    mainPanel.setCellWidth(categories, "150px");
    mainPanel.setCellHeight(categories, "500px");

    Widget tasks = new Label("Tasks");
    mainPanel.add(tasks, DockPanel.EAST);
    RootPanel.get().add(mainPanel);
  }

}

我还添加了一些 CSS 代码来配置 html 和 body 标签：

* {
  margin: 0px;
  padding: 0px;
  border: 1px solid black;
}

html, body{
  height: 100%;
  width: 100%;
  min-height: 100%;
}

我使用的 html 页面如下所示：

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="BeginningGWT_BookExample.css">
    <title>Web Application Starter Project</title>
    <script type="text/javascript" language="javascript" src="beginninggwt_bookexample/beginninggwt_bookexample.nocache.js"></script>
  </head>

  <body>
  </body>
</html>

所以我的问题来了：在编译的网页中，左边有一个 5-10 像素（估计）的边距，我无法解释或摆脱它。我通过chrome和firefox查看了它，结果是一样的。我怎样才能摆脱左边的额外间距？我想要一个 100% 的网站。

提前感谢您的任何答案

安德烈

PS：我故意不使用 UI Binder，因为我现在需要学习不用它。所以请不要就此展开讨论。谢谢 ;-）

4

2 回答 2

3

10px 的边距来自 clean.css，它是应用的 Clean 主题的一部分。

您可以从模块配置文件中将此主题更改为标准主题。

只需删除或评论

  <inherits name='com.google.gwt.user.theme.clean.Clean'/>

并添加

  <inherits name='com.google.gwt.user.theme.standard.Standard'/>

这样做会删除边距。

否则你显然也可以覆盖你的css中的样式。所以在body style中还要加上“margin 0px !important;”

html, body{
   height: 100%;
   width: 100%;
   min-height: 100%;
   margin 0px !important
}
于 2012-09-03T23:21:04.603 回答
0

问题是：

RootPanel.get().add(mainPanel)

使用 DockLayoutPanel 您需要使用

RootLayoutPanel.get().add(mainPanel)

请参阅https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels

根布局面板

此面板是一个单例，用作所有其他布局面板应附加到的根容器（有关详细信息，请参阅下面的 RequiresResize 和 ProvidesResize）。它扩展了 LayoutPanel，因此您可以使用任意约束定位任意数量的子级。

您最常使用 RootLayoutPanel 作为另一个面板的容器，如以下代码片段所示，这会导致 DockLayoutPanel 填充浏览器的客户区：

DockLayoutPanel appPanel = new DockLayoutPanel(Unit.EM); RootLayoutPanel.get().add(appPanel);

一旦你这样做了，你就可以摆脱css（DockLayoutPanel无论如何都会占用所有空间，它就是这样工作的）：

html, body{
  height: 100%;
  width: 100%;
  min-height: 100%;
}
于 2012-09-04T06:54:38.317 回答