爲什麼這個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頁面沒有垂直滾動條？

回答

相關問題