0

コンテンツをフッターを画面のさらに下に移動させるにはどうすればよいですか? フッターをさらに下に押す代わりに、コンテンツが消えます (SO ホームページで見られるように)。

DockLayoutPanelGWT 2.5.1 と共にUiBinder、、、および CSS を使用しています。

私の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 に答える