0

如何让我的内容将页脚推到屏幕下方？内容消失了，而不是将页脚进一步向下推（就像我们在 SO 主页上看到的那样）。

我正在使用 UiBinder、.DockLayoutPanel和 CSS 以及 GWT 2.5.1。

我的 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:south size="70">
    <g:HTMLPanel styleName="{style.shellStyles.footer}">
        <g:Label>&copy; Copyright by Justin Robbins</g:Label>
    </g:HTMLPanel>
</g:south>
<g:center>
    <g:HTMLPanel styleName='{style.shellStyles.content}'>
        <g:SimplePanel styleName='{style.shellStyles.left}' ui:field="navigationPanel" />
        <g:ScrollPanel styleName='{style.shellStyles.right}' ui:field='contentPanel' alwaysShowScrollBars="false" />
        <div style="clear: both;" ></div>
    </g:HTMLPanel>
</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%;
}

更新：opowell 建议将南面板的内容移至中心有帮助。页脚现在被向下推。但是现在内容向下延伸到屏幕底部以下，但没有出现滚动条。现在有什么关于获得滚动条的建议吗？我为滚动条问题创建了一个单独的问题。

4

1 回答 1

1

将南面板的内容移动到中心就那么简单吗？

<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:ScrollPanel styleName='{style.shellStyles.right}' ui:field='contentPanel' alwaysShowScrollBars="false" />
        <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>
于 2013-04-14T21:30:51.090 回答