Question

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

我之前问similar question，但它是针对为什么页脚在内容增长时不会扩展的原因。我解决了这个问题，但现在页脚向南移动，但页面滚动条从未显示出来。

我的UiBinder xml如下（这里是link to the file）：

<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的摘录如下（这里是link to the full 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%;
}

Answer 1

使用ScrollPanel将Flowpanel包裹在内容区域中并设置其高度。您将获得滚动

Answer 2

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

如果您知道的内容会增长，只需将其包装到RequiresResize，或将ScrollLayoutPanel元素的第一个FlowPanel设置为<center>（这很丑陋）你会看到）。

您也可能希望页脚始终可见，那么为什么不将其移动到主overflow的区域？

我建议你阅读here。

为什么这个uibinder页面没有垂直滚动条？

2 个答案: