如何获取内容以向下压页脚(使用UiBinder和DockLayoutPanel)? [英] How to get content to push footer down (using UiBinder & DockLayoutPanel)?

问题描述

如何获取内容以将页脚进一步推到屏幕下方?内容消失了，而不是将页脚向下推(就像我们在SO主页上看到的那样).

How can I get my content to push the footer further down the screen? The content disappears instead of pushing the footer further down (like we see on the SO home page).

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

I am using UiBinder, DockLayoutPanel, and CSS along with GWT 2.5.1.

我的UiBinder xml如下(这里是

My UiBinder xml is as follows (here's a 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: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摘录如下(这里是

Excerpt of CSS is as follows (here's a 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%;
}

更新:opowell建议将"South"面板的内容移动到"Center"会有所帮助.页脚现在被按下.但是现在内容向下扩展到屏幕底部下方，但是没有滚动条出现.现在就获得滚动条有什么建议吗?我为滚动条创建了单独的问题问题.

Update: opowell's suggestion of moving contents the of South panel to Center helps. The footer is now pushed down. But now the content extends down below the bottom of the screen but no scrollbar appears. any suggestions for getting a scrollbar now? I've created a separate question for the scrollbar issue.

推荐答案

将南部"面板的内容移动到中心是否简单?

Is it as simple moving the contents of the South panel to the Center?

<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>

这篇关于如何获取内容以向下压页脚(使用UiBinder和DockLayoutPanel)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！