css - GWT:带框架的站点布局

Question

我不是真正的网络开发人员，所以如果我的词汇量有限，请原谅。

我想要做的是创建一个页眉和一个主要内容面板。主内容面板应在左侧包含一个可滚动的菜单。另一方面，标题应是固定的。左侧的菜单也应该静态地位于内容面板旁边的垂直位置。

|- - - - - - - - - - - - - - -|
| Header (fixed)              |
|- - - - - - - - - - - - - - -|
|          |                | |
| | - - - -|                | |
| | Menu   |                | |
| |(fixed) |  Main-Content  | |
| |        |  (scrollable)  | |
| |- - - - |                | |
|          |                | |
|          |                | |
|- - - - - |- - - - - - - - |-|

问题是我已经遇到标题问题了。我用过这个:

<ui:style>
    .home_header {
    background-color: #FFC400;
    margin:0px;
    width:100%;
    height:90px;
    position: relative;
    }

    .home_main {
    margin-top:90px;
    }
</ui:style>

<g:VerticalPanel width="100%" height="100%">

    <!-- For now this is empty -->
    <g:DeckPanel ui:field="headerPanel" styleName="{style.home_header}">
    </g:DeckPanel>

    <g:HorizontalPanel horizontalAlignment="ALIGN_CENTER" width="100%" styleName="{style.home_main}">
        <g:ScrollPanel>
            <g:DockPanel>
                <g:Dock direction="CENTER">
                    <g:HTMLPanel ui:field="mainContentPanel" width="1024px" height="1005"> 
                    ...
                    </g:HTMLPanel>
                </g:Dock>
            </g:DockPanel>
        </g:ScrollPanel>

    </g:HorizontalPanel>
</g:VerticalPanel>

我正在这样设置页眉的位置:

public UIHome() {
    initWidget(uiBinder.createAndBindUi(this));     
    Window.addWindowScrollHandler(new Window.ScrollHandler() {
        @Override
        public void onWindowScroll(
                com.google.gwt.user.client.Window.ScrollEvent event) {
            headerPanel.getElement().getStyle().setTop(event.getScrollTop(), Unit.PX);
        }
    });
}

但这里的问题一方面是页脚在闪烁，如果向下滚动，内容会显示在其上方。

我没有考虑是否应该使用框架集之类的东西，但我不确定这是否适合这里。

有什么关于如何设置此布局的建议吗？

Answer 1

这不是 DockLayoutPanel 的确切用例吗？ ？您可以在 Showcase 中看到它的运行情况。 .

就 UiBinder 而言，它看起来是 something like this :

<g:DockLayoutPanel unit='EM'>
  <g:north size='5'>
    <g:DeckPanel ui:field="headerPanel" styleName="{style.home_header}" />
  </g:north>
  <g:center>
    <g:ScrollPanel>
        <g:HTMLPanel ui:field="mainContentPanel" width="1024px" height="1005"> 
            ...
        </g:HTMLPanel>
    </g:ScrollPanel>
  </g:center>
  <g:west size='192'>
    <g:HTML>
      <ul>
        <li>Sidebar</li>
        <li>Sidebar</li>
        <li>Sidebar</li>
      </ul>
    </g:HTML>
  </g:west>
</g:DockLayoutPanel>