整个窗口上的 GWT 滚动条答案

【问题标题】：GWT scroll bar over the all window整个窗口上的 GWT 滚动条
【发布时间】：2012-05-05 14:05:53
【问题描述】：

我有一个包含页眉页脚和主要内容槽的全局演示者，当页眉始终位于顶部时，页脚始终位于底部...

我的问题是：如何为我的 Global Presenter 添加滚动条？

我知道有很多这样的问题，但我找不到适合我的答案。

我有 UiBinder，它有代码：

    <g:RootLayoutPanel width="100%" height="100%">
    <g:layer left="0px" right="0px" top="0px" bottom="0px">
        <g:DockLayoutPanel unit="EM">
            <g:north size="5.0">
                <g:HTMLPanel ui:field="headerContentPanel" />
            </g:north>
            <g:center size="1.0">
                <g:FlowPanel ui:field="mainContentPanel" />
            </g:center>
            <g:south size="1.5">
                <g:HTMLPanel ui:field="footerContentPanel" />
            </g:south>
        </g:DockLayoutPanel>
    </g:layer>
</g:RootLayoutPanel>

我尝试添加包含 RootLayotPanel 或其他面板的 ScrollPanel。但所有内部面板的大小都为零。

我尝试在 scrollPanel 内使用垂直面板，但我无法将页脚放在底部。

有人有答案吗？

================================================ ====================================

我成功了，这是我的新代码：

    <g:RootLayoutPanel width="100%" height="100%">
    <g:layer>

        <g:ScrollPanel width="100%" height="100%">
            <g:DockPanel width="100%" horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
                <g:Dock direction="NORTH" >
                    <g:HTMLPanel ui:field="headerContentPanel" />
                </g:Dock>
                <g:Dock direction="CENTER" verticalAlignment="ALIGN_MIDDLE" horizontalAlignment="ALIGN_CENTER">
                    <g:FlowPanel ui:field="mainContentPanel" />
                </g:Dock>
                <g:Dock direction="SOUTH"  verticalAlignment="ALIGN_BOTTOM" horizontalAlignment="ALIGN_CENTER">
                    <g:HTMLPanel ui:field="footerContentPanel" />
                </g:Dock>
            </g:DockPanel>
        </g:ScrollPanel>

    </g:layer>
</g:RootLayoutPanel>

但我有一个小问题：无论我尝试什么，我的页脚都没有连接到底部。有人知道解决方案吗？

【问题讨论】：

嗯我看不出将滚动条放在这里的意义，因为内部DockLayoutPanel 将占据该层的所有宽度/高度。由于您的图层从所有 4 个侧面定位为0px，它将占用您浏览器屏幕的 100%。您确定要滚动页眉和页脚还是只是中心面板？
是的，我想要页眉和页脚周围的滚动条。就像在 facebook 中一样，标题也包含在滚动条中
好的，尝试用ScrollPanel 包裹DockLayoutPanel。这应该可以解决问题，但目前我不在我的开发计算机旁，无法检查......
感谢您的帮助。但是我已经试过了，还是不行。它仅在 DockLayoutPanel 具有固定宽度和高度（如 800 像素）时才有效。我尝试将宽度和高度设置为 100%，但不幸的是没有成功。

标签： gwt uibinder

【解决方案1】：

布局面板在滚动面板中无法正常工作。但是 scoll 面板可以在 Layout Panels 中使用：例如滚动中心部分：

    <g:DockLayoutPanel unit="EM">
        <g:north size="5.0">
            <g:HTMLPanel ui:field="headerContentPanel" />
        </g:north>
        <g:center size="1.0">

          <g:ScrollPanel>
            <g:FlowPanel ui:field="mainContentPanel" />
          </g:ScrollPanel>

        </g:center>
        <g:south size="1.5">
            <g:HTMLPanel ui:field="footerContentPanel" />
        </g:south>
    </g:DockLayoutPanel>

另一种可能性是使用 DockPanel 代替布局面板。

如果标题包含在滚动条中：

<g:ScrollPanel>   
   <g:DockPanel>
      <g:Dock direction="NORTH" height="100px">
          <g:HTMLPanel ui:field="headerContentPanel" />
      </g:Dock>
      <g:Dock direction="CENTER">
          <g:FlowPanel ui:field="mainContentPanel" />
      </g:Dock>
      <g:Dock direction="SOUTH" height="100px">
          <g:HTMLPanel ui:field="footerContentPanel" />
      </g:Dock>
  </g:DockPanel> 
</g:ScrollPanel>

然后将其放入RootLayoutPanel 或RootPanel

或者在布局面板中使用 DockPanel。例如：我们希望有可滚动的标题和中心部分，但西面板和底部始终在视图中：

<g:DockLayoutPanel width="100%">
  <g:west size="100.0">
     <g:Label>West side </g:Label>
  </g:west>
  <g:center>
     <g:ScrollPanel>   
        <g:DockPanel>
          <g:Dock direction="NORTH" height="100px">
            <g:HTMLPanel ui:field="headerContentPanel" />
          </g:Dock>
          <g:Dock direction="CENTER">
            <g:FlowPanel ui:field="mainContentPanel" />
          </g:Dock>
        </g:DockPanel> 
     </g:ScrollPanel>
  </g:center>
  <g:south size="50">
     <g:HTMLPanel ui:field="footerContentPanel" />
  </g:south >
</g:DockLayoutPanel>

然后把这个放到RootLayoutPanel。

【讨论】：

谢谢，非常清楚.. 很好的答案！正如我所说，我需要用滚动条覆盖我的所有页面。我用你的第二个解决方案成功地做到了，我在那里编辑了我的问题，你可以看到我的代码，但是现在我有另一个问题，我的页脚没有附加到底部，你也可以帮我解决吗？跨度>
我不确定。也许尝试使用高度。如果不指定高度，verticalAlignments 没有任何意义。示例：

【解决方案2】：

暂时忘记所有 GWT (UiBinder) 语法和所有级联布局。想想这个简化的例子：

我们有一个窗口，假设当前高度为 1000 像素。
我们有一个占窗口高度 100% 的容器（想象一个简单的黑盒子），因此它的高度为 1000 像素。

在这种情况下，没有什么可以滚动的。因此，使用 scroll=auto 时，窗口上将没有滚动条。（忘记我们黑盒子内的任何可能的滚动条。）

如果您想要一个标题保持在顶部，而其他所有内容都滚动的布局（滚动条占据 100% 高度），您可能应该从带有“位置=固定”的标题开始。所以你会在 HTML 中做的是：

<div class="headerContent">My header</div>
<div class="everythingElse">
   <div class="mainContent">...</div>
   <div class="footerContent">My footer</div>
</div>

CSS：

.headerContent {
  position: fixed;
  top: 0;
  left: 0;
  height: 5.0em;
  width: 100%;
  background-color: red;
}
.everythingElse {
  margin-top: 5.0em; /* Same as the height of the header */
}

您可以在 GWT UiBinder 中执行相同的操作。只需将 div 替换为简单的 FlowPanel（如果您愿意），然后应用 css（使用 addStyleNames 属性引用的 UiBinder CSS 类）。不需要 DockPanel。当“everythingElse”的高度超过窗口高度时，body标签默认设置显示滚动条。

【讨论】：