Java GWT布局：如何修复此布局（DockPanel）？_Java_Gwt_Web_Dockpanel

Java GWT布局：如何修复此布局（DockPanel）？

java gwt web

Java GWT布局：如何修复此布局（DockPanel）？,java,gwt,web,dockpanel,Java,Gwt,Web,Dockpanel,我正试图在谷歌的网络工具包中找到自己的出路。所以我想做一个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.HasA

我正试图在谷歌的网络工具包中找到自己的出路。所以我想做一个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>


Web应用程序启动程序项目

所以我的问题来了：在编译后的网页中，左边有一个5-10px（估计）的边距，我无法解释或去掉。我通过chrome和firefox查看，结果是一样的。我怎样才能去掉左边多余的间距？我想有一个100%的网站填写

提前感谢您的回答

安德烈

注：我一直没有使用UI活页夹，因为我现在需要学习如何不用它。所以请不要就此展开讨论。谢谢；-）

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

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

删除或评论即可

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

问题是：

RootPanel.get（）.add（主面板）

使用DockLayoutPanel，您需要使用

RootLayoutPanel.get（）.add（主面板）

请看

根布局面板

此面板是一个单例，用作所有应附加其他布局面板（请参见要求调整大小和请在下面提供调整大小以了解详细信息）。它扩展了LayoutPanel，因此可以使用任意约束定位任意数量的子对象

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

DockLayoutPanel appPanel=新DockLayoutPanel（单位：EM）； RootLayoutPanel.get（）.add（appPanel）

一旦你这样做了，你就可以摆脱css（DockLayoutPanel将占用所有空间，这就是它的工作原理）：

您好，非常感谢：这解决了我的问题，我想我必须更仔细地研究主题。谢谢，这也帮助了我，但还没有更深入地了解为什么这是默认行为，因为clean.css不存在。您好，非常感谢您将我指向RootLayoutPanel。我会进一步调查。不管怎样——即使它现在可能不是“干净”的解决方案——我把解决的标志给了安克尔。在这种情况下，您的解决方案仍然给我留下了滚动条，因此还没有完全解决-但是您的回答仍然非常有用，有助于将来代码的清理。谢谢

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

html, body{
   height: 100%;
   width: 100%;
   min-height: 100%;
   margin 0px !important
}

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