画面の高さ 100%

最近は縦に長いページが多くなりました。
それにデバイスの多様化で表示画面の縦サイズがまちまちです。
CSS だけの場合、幅は自動で 100% の指定が出来ますが
縦は 100% を指定しても思った通り動作してくれません。
そんな時に、特定のブロックの縦を画面サイズ一杯に指定する方法です。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript"><!--

            function setHeight () {
                dispHeight = $(window).height();
                $(".auto_height").height(dispHeight);
            }

            $(function(){

                // resize
                $(window).resize(function() {
                    setHeight();
                });

                // init
                setHeight();

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #area_1 {
                background-color : #ff0000;
            }
            #area_2 {
                background-color : #00ff00;
            }
            #area_3 {
                background-color : #0000ff;
            }
            #area_4 {
                background-color : #ffff00;
            }
            #area_5 {
                background-color : #00ffff;
            }
            #area_6 {
                background-color : #ff00ff;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="main_area">
                <div id="area_1" class="auto_height"></div>
                <div id="area_2" class="auto_height"></div>
                <div id="area_3" class="auto_height"></div>
                <div id="area_4" class="auto_height"></div>
                <div id="area_5" class="auto_height"></div>
                <div id="area_6" class="auto_height"></div>
            </div>

        </div>
    </body>
</html>

sample

sample を表示すると6色の div が画面の縦幅一杯に表示されると思います。
サイズを変更しても追随するように設定しています。

特に処理としては難しいことをしておらず、最初と resize 時に画面の高さを設定し、
特定の class (今回は auto_height)を指定した 領域の縦サイズを直指定しています。

比較的簡単だろうなと思いつつ行ってみましたが、一箇所落とし穴がありました。
それは 一番最初に記述する以下の1文です。

<!DOCTYPE html>

これを記述しておかないと縦サイズを正常に取得してくれません。
「何でかな~」とばかりに無作為に小一時間ほど悩みました・・・
宣言文って重要ですね(笑)

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です