none
フッター常に下に固定 RRS feed

  • 質問

  • フッターを固定したく作成段階です。

    環境:
    Windows XP(SP3)
    Visual Studio 2008
    IE7
    Firefox 3.0.10


    ページごとに、記事が少ないときでもフッターの部分が常に下に固定したく以下のコードのように作成しました。

    ■行いたいこと
    Firefox でもフッターを常に下に固定させたい






    ■aspxファイル

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="foot.aspx.vb" Inherits="foot" %>
    
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    
    <head runat="server">
    
        <title></title>
    
        
    
        <link href="src/css/aspcss.css" rel="stylesheet" type="text/css" />
    
        
    
        
    
        
    
    </head>
    
    <body>
    
        <form id="form1" runat="server">
    
            <div id="container">
    
    
    
            <div id="header">
    
            ヘッダー
    
            </div>
    
            <!-- メインエリア ↓ -->
    
            <div id="main">
    
            コンテンツ
    
            </div>
    
            <!-- ここまで ↑ -->
    
    
    
            </div>
    
    
    
            <div id="footer">
    
            フッター
    
            </div>
    
    
    
        </form>
    
    </body>
    
    </html>
    
    
    
    



    ■cssファイル

    body {
    	margin:0px;
    }
    html {
    	height:100%;
    }
    #container {
    	min-height:100%;
    	margin-bottom:-80px;
    	height:auto !important;
    	height:100%;
    }
    #header {
    	height:100px;
    	background:#ccffcc;
    }
    #main {
    	background:#ffff99;
    }
    #footer {
    /*
    	height:80px;
    	background:#ffcc99;
    */
        margin:0;
        padding:0;
        background:#ffcc99;
        position:relative;
        height:85px;
    }
    






    上記コードの様に、表示しますとIEではフッターがちゃんとしたに固定されますが、Mozilla Firefoxだとフッターが上に詰めてしまいます。

    W3C CSS 検証サービス(http://jigsaw.w3.org/css-validator/#validate_by_input)などで検証したり下のですが特に以上はありませんでした。
    上記aspxのコードをそのままhtmlにしIEとfirefoxで試したらフッターがきちんと下に固定されました。

    Firefoxでもフッターを常に下に固定したい場合は、どうすればよいのでしょうか。
    色々と調べたのですが、どこがいけないのかわかりません。

    アドバイスをお願いします。





    tomotomody
    2009年5月17日 21:26

回答

  • 上記のコードを試してみましたが、FireFox だけでなく、IE8 のデフォルトでもうまく表示できませんでした。
    Quirks モードだとフッターが最下部に固定されたので、ブラウザーを選ぶコードのようですね。

    クロス ブラウザーで実現するには、

     New CSS Sticky Footer - 2009
     http://www.cssstickyfooter.com/

    あたりが参考になると思います。あるいは、「CSS フッター 固定」あたりで検索してみるとか。

    ちなみに W3C CSS 検証サービスは、CSS が構文として正しいかを検証するもので、動作的に正しいかは検証できないと思います。

    • 回答としてマーク sk7474 2009年5月28日 9:05
    2009年5月18日 3:21

すべての返信

  • 上記のコードを試してみましたが、FireFox だけでなく、IE8 のデフォルトでもうまく表示できませんでした。
    Quirks モードだとフッターが最下部に固定されたので、ブラウザーを選ぶコードのようですね。

    クロス ブラウザーで実現するには、

     New CSS Sticky Footer - 2009
     http://www.cssstickyfooter.com/

    あたりが参考になると思います。あるいは、「CSS フッター 固定」あたりで検索してみるとか。

    ちなみに W3C CSS 検証サービスは、CSS が構文として正しいかを検証するもので、動作的に正しいかは検証できないと思います。

    • 回答としてマーク sk7474 2009年5月28日 9:05
    2009年5月18日 3:21
  • こんにちは。中川俊輔です。

    totojoさん、回答ありがとうございます。

    トモディーさん、フォーラムのご利用ありがとうございます。
    その後いかがでしょうか?問題は解決しましたか?

    有用な情報と思われたため、勝手ながらtotojoさんの回答へ回答マークをつけさせていただきました。

    今後ともフォーラムをよろしくお願いします。
    それでは!
    マイクロソフト株式会社 フォーラム オペレータ 中川 俊輔
    2009年5月28日 9:17