[cssメモ]幅100%高さ100%で画面いっぱいに表示するコンテンツの下に固定高さのフッターを付けるには

Posted by kumacchi on 2009年6月20日 , 3 Comments

下の様に、幅100%高さ100%で画面いっぱいに表示するテーブルやフラッシュなどのコンテンツがあったとします。

XG001384

サンプル01

●HTMLソース

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
        <title>Style Sheet test01</title>
        <style TYPE="text/css">
        <!–
            * {
                padding: 0;
                margin: 0;
                word-break : break-all;
            }
        –>
        </style>
    </head>

    <body>
        <div id="main">

            <table width="100%" border="1" cellspacing="0" cellpadding="0" height="100%" bgcolor="#90ee90">
              <tr>
                <td>ＴＡＢＬＥ</td>
              </tr>
            </table>

        </div>

    </body>
</html>

 

それで、下に固定高さのフッターを入れたいなーと思うとこんな風にしてしまいがちです。

 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
        <title>Style Sheet test02</title>
        <style TYPE="text/css">
        <!–
            * {
                padding: 0;
                margin: 0;
            }

            #main{
                height:auto;
            }
            #footer{
                height:50px;
            }

        –>
        </style>
    </head>

    <body>
        <div id="main">

            <table width="100%" border="1" cellspacing="0" cellpadding="0" height="100%" bgcolor="#90ee90">
              <tr>
                <td>ＴＡＢＬＥ</td>
              </tr>
            </table>

        </div>
        <div id="footer">
            ＦＯＯＴＥＲ
        </div>
    </body>
</html>

 

XG001385

どうもだめですね。スクロールバーが出ています。

XG001386

サンプル03

スクロールするとフッターが見えます。これではだめですね。期待しているのは画面内に１画面で全て表示されてほしいわけです。スクロールバーなしで。

 

で、こうするとうまくいきます。

 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
        <title>Style Sheet test02</title>
        <style TYPE="text/css">
        <!–
            * {
                padding: 0;
                margin: 0;
            }

            body{
                padding-bottom:50px;
                overflow:hidden;
            }

            #main{
            }

            #footer{
                height:40px;
                border:1px solid #888888;

            }

        –>
        </style>
    </head>
<body>
    <div id="main">

        <table width="100%" border="1" cellspacing="0" cellpadding="0" height="100%" bgcolor="#90ee90">
          <tr>
            <td>ＴＡＢＬＥ</td>
          </tr>
        </table>

    </div>
    <div id="footer">
        ＦＯＯＴＥＲ
    </div>
</body>
</html>

 

XG001387  

サンプル04

こうなりました。うまく１画面に収まっています。スクロールバーも出ていませんね。わかりやすくするために、フッターを40pxにして画面下に10px隙間を作っています。

で、ミソは、bodyにpaddingを指定することと、はみ出した部分をスクロールバーを出さないように、overflowでhiddenにしてあげることです。

 

◇参考：div heightをウィンドウサイズを変えたときに付随してかわるようにしたいです。 – Yahoo!知恵袋

結構悩んだので上のYahoo!知恵袋の情報はとても助かりました。

 

Web標準デザインテクニック即戦ワークブック―XHTML+CSSを正しく賢く書くための15問 (Web designing books)

(Visited 98 times, 1 visits today)

タグ :

カテゴリ： プログラム