ブラウザ幅いっぱい広がるビジュアル

ブラウザ幅(横または縦)を変更してもビジュアルがブラウザ幅に合わせて可変します。

デモページ

HTML

        <div class="visual">
            <div class="visual_inner">
                ブラウザの縦/横幅を変更した場合に<br>画面いっぱいにメインビジュアルが広がる
            </div>
        </div>
        <div class="content">
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
        </div>

CSS

    body{
        margin:0;
    }
    .visual{
        position: relative;
        background:#238cdc;
    }
    .visual_inner{
        position: absolute;
        left: 0;
        right: 0;
        top: 40%;
        margin:0 auto;
        padding:30px 40px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        text-align: center;

    }
    .content{
        max-width: 980px;
        padding: 0 10px;
        margin:30px auto 0;
        box-sizing: border-box;
    }

jQuery

    $(function(){
        // .on('load resize'~でロードされたときとリサイズされたときに発動
        $(window).on('load resize',function(){
                var visual = $('.visual'),
                //  $(window).height();でウィンドウの縦幅を取得
                wdHeight = $(window).height();
                //cssを書き換えます
                visual.css({height:wdHeight});
        });
    });

onで複数のイベントを設定できます。今回はloadとresizeを使用しました。
loadはhtmlを込みこんでから処理を実行、resizeはブラウザは幅が変わったら処理を実行します。

  • コーダーのための計算機