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

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

我问了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%; 
}

来源

2013-04-15 Justin

环绕你Flowpanel内容区域与ScrollPanel，并设置其高度。你会得到滚动

来源

2013-04-15 11:29:57

这为我做了。谢谢 – Justin

您使用的是基于布局的面板作为你的根元素，因此它总是适合整个页面，如果你调整浏览器窗口的大小，一切都会相应地调整大小（如果哟你已经使用了ProvidesResize/RequiresResize小部件）。

如果你知道它会成长的内容，只需将它包装成一个ScrollLayoutPanel，或设置<center>元素的第一FlowPanel有overflow（它的丑陋，你会看到）。

您也可能希望在页脚总是可见的，那么为什么不动是到主DockLayoutPanel的区域？

我建议你给读here。

来源

2013-04-15 08:47:22

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

回答

相关问题