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

下の様に、幅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>TABLE</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>TABLE</td>
              </tr>
            </table>

        </div>
        <div id="footer">
            FOOTER
        </div>
    </body>
</html>

 

XG001385

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

XG001386

サンプル03

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

 

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

 

<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>TABLE</td>
          </tr>
        </table>

    </div>
    <div id="footer">
        FOOTER
    </div>
</body>
</html>

 

XG001387  

サンプル04

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

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

 

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

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

 

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

タグ :