0

http://ffmages.com/final-fantasy-tactics (例として)にアクセスすると、フッター セクションがナビゲーション領域とコンテンツ領域の両方の背後に表示されていることがわかります。ナビゲーションとコンテンツが 100% の高さで伸び、フッターが画面の下部にとどまるようにしたいと思います。

以下は、ヘッダー、メニュー、コンテンツ、およびフッター セクションに使用している CSS です。

#container {
    width: 1000px;
    height: 100%;
    background-image: url(/images/background.gif); 
    margin: 0 auto;
}

#header {
    width: 1000px; 
    height: 98px;
    background-image: url(/images/header.jpg);
    background-repeat: no-repeat;
}

#primary {
    float: left; 
    width: 167px;
    height: 798px;
    text-align: left;
    padding-bottom: 14px;
    background-image: url(/images/nav-bg.jpg); 
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    margin: 0px;
    border-top: 1px #000000 solid;
    border-left: 1px #000000 solid;
    border-right: 1px #000000 solid;
}

#content {
    float: right;
    width: 810px; 
    height: 100%;
    text-align: left;
    background-color: #FFFFFF; 
    border-top: 1px #000000 solid; 
    border-right: 1px #000000 solid; 
    padding: 10px;
    line-height: 1.5em; 
    margin: 0px;
}

#footer {
    clear: both;
    width: 998px;
    height: 18px;
    font-size: 7pt;
    color: #FFFFFF;
    text-align: center;
    background-color: #07162A;
    background-image: url(/images/footer-bg.jpg);
    border-top: 1px #000000 solid;
    border-left: 1px #000000 solid;
    border-right: 1px #000000 solid;
    border-bottom: 1px #000000 solid;
    padding-top: 6px;
    padding-bottom: 1px;
}

どんな助けでも大歓迎です。ありがとうございました！

4

2 に答える 2

0

あなたがしなければならないのは（与えられた例に基づいて、CSSに2つの属性を適用することです

position: fixed;
bottom: 0;

これらの両方が適用されると、フッターは常にページの下部に配置され、設定した幅がどれだけ広くなるか...あなたの場合998px

于 2012-07-20T21:29:11.167 に答える
0

div 階層を見ずに言うのは難しいです。

ここで唾を吐くだけですが、div構造をそのように設定できます。

---------------------------------------------
|                  HEADER                   |
---------------------------------------------
|      |                                    |
|      |                                    |
|      |                                    |
| NAV  |           BODY                     |
|      |                                    |
|      |                                    |
|      |                                    |
---------------------------------------------
|                  FOOTER                   |
---------------------------------------------

NAV が実際に BODY 内に含まれている場所。BODY または NAV が垂直に拡張されると、それに応じて FOOTER が押し出されます。フッターをブラウザー ウィンドウの下部に合わせて配置するには、マージンとパディングを調整する必要があります。

于 2012-07-20T21:26:31.643 に答える