0

我希望浏览器在内容变得大于页面时显示垂直滚动条。内容和页脚消失在屏幕下方，而不是显示垂直滚动条（就像我们在 SO 主页上看到的那样）。

我之前问过一个类似的问题，但它是针对为什么页脚不会随着内容的增长而扩展的。我解决了这个问题，但现在页脚向南移动，但页面滚动条从未出现。

我的 UiBinder xml 如下（这里是文件的链接）：

<g:DockLayoutPanel unit='PX' styleName="{style.shellStyles.wrap}">
<g:north size='180'>
    <g:HTMLPanel styleName='{style.shellStyles.header}'>
        <div id="login" class="{style.shellStyles.login}">
            <g:InlineLabel ui:field="loggedInUser"/>
            <g:InlineHyperlink ui:field="loginLogoutLink"/>
        </div>
        <h1><a href="/">Flash Cards Application</a></h1>
    </g:HTMLPanel>
</g:north>
<g:center>
  <g:FlowPanel>
    <g:HTMLPanel styleName='{style.shellStyles.content}'>
        <g:SimplePanel styleName='{style.shellStyles.left}' ui:field="navigationPanel" />
        <g:SimplePanel styleName='{style.shellStyles.right}' ui:field='contentPanel' />
        <div style="clear: both;" ></div>
    </g:HTMLPanel>
    <g:HTMLPanel styleName="{style.shellStyles.footer}" height="70">
        <g:Label>&copy; Copyright by Justin Robbins</g:Label>
    </g:HTMLPanel>
  </g:FlowPanel>
</g:center>

CSS 的摘录如下（这里是完整 CSS 的链接）：

.wrap {
    width: 820px;
    margin: 20px auto 10px auto;
}
@sprite .header {
gwt-image: "headerImage";
background-color: #efefef;
height: 180px;
}
@sprite .content {
    gwt-image: "contentImage";
    background-color: #efefef;
    padding: 10px 40px 20px 20px;
    min-height: 500px;
}
.left {
    width: 210px;
    float: left;
}
@sprite .left h4 {
    gwt-image: "sidebarImage";
    padding: 0 0 0 10px;
    height: 50px;
    line-height: 50px;
    color: #fff;
}
.right {
    width: 530px;
    float: right;
    padding-top: 10px;
    padding-right: 60px;
}
@sprite .footer {
    gwt-image: "footerImage";
    background-color: #efefef;
    height: 70px;
    line-height: 70px;
    color: #fff;
    text-align: center;
}

*{margin:0; padding:0;}
body {
    font-family: Arial;
    font-size: 12px; 
    background: #efefef;
    color: #232323; 
    margin:0; 
    padding:0;
    line-height: 150%;
}
4

2 回答 2

2

使用ScrollPanel将 Flowpanel 包裹在内容区域并设置其高度。你会得到卷轴

于 2013-04-15T11:29:57.963 回答
1

您正在使用基于布局的面板作为根元素，因此它将始终适合整个页面，如果您调整浏览器窗口的大小，所有内容都会相应地调整大小（如果您已经使用ProvidesResize/RequiresResize小部件）。

如果您知道它的内容会增长，只需​​将其包装成 a ScrollLayoutPanel，或将元素的第一个设置FlowPanel为<center>have overflow（您将看到它很难看）。

您可能还希望页脚始终可见，那么为什么不将其移到 main 区域DockLayoutPanel呢？

我建议你在这里阅读。

于 2013-04-15T08:47:22.920 回答