0

競合する結果を引き起こしていると思われるページがいくつかあります。ログイン ページの背景が灰色で、内部ページの背景が白です。しかし、id="loginPage" の div は、「コンテナー」div の高さ全体を引き伸ばしません。したがって、loginPage div はグレーですが、コンテナ div の残りのスペースはまだ白です。

現在、大量のコンテンツを含むページがいくつかあるため、メイン コンテナーには min-height があります。height:100% のみに設定すると、ページの下部にフッターが表示されません。しかし、min-height に設定すると、ページの一番下に落ちます。

これが私のcssです：

html, body { height: 100%;}

#loginPage {
    width:100%;
    height:100%;
    float:left;
    background-color:#F7F7F9!important;
}
    #container
{
    min-height:95%;
    position: relative;
    background:white;
}
.footerBg
{
     width:100%;
     padding-top:10px;
     margin:0;
     position:relative;
}

およびhtml：

<div id="container">
<div class="topHeader_login">
<form method="post" action="/">
<div id="loginPage">
<div id="login_content">
<div id="login">
<div id="info">
<div style="text-align:center; padding-top:15px; float:left;"> </div>
</div>
</div>
</form>
</div>
<div class="footerBg">
4

2 に答える 2

1

これを見たいと思うかもしれません：http://ryanfait.com/sticky-footer/

コンテンツが小さい場合でもフッターを常にページの下部に保持する方法を説明し、必要でない場合はスクロールバーを追加しません. 次に、「灰色」の背景色をページ ラッパーに追加するだけです。

于 2013-01-23T19:08:29.913 に答える
0

Web ページの高さをパーセンテージで設定したい場合は、高さを定義したい要素のすべての親要素の高さを設定する必要があります。

ソース: http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

与えてみてくださいform { height: 100% }

このフィドルを見てください、私はあなたのhtmlとcssをきれいにしました

于 2013-01-23T18:36:58.970 に答える