CSS(LESS) でヘッダー, フッター固定リキッドレイアウトを作る方法

phi phi on css, less

最近 Web ツールを作ることが多く, このタイトルにあるような ヘッダー, フッターが固定でコンテンツのみリキッドレイアウトなページを作る機会がよくありました.

左は編集画面, 右はプレビュー画面的なページをイメージしてもらえればと. 都度都度考えてても効率が悪いので備忘録がてらメモってみました.

Demo

ヘッダー, フッターが固定になっていて, 左右にあるコンテンツがそれぞれ独立してスクロールするのがわかるかと思います.

[runstant]

CSS(LESS)

コードはこんな感じです.

@header-height: 60px;
@header-color: white;
@header-bg: black;
@footer-height: 40px;
@footer-color: white;
@footer-bg: black;


* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

body {  
    background-color: rgb(240, 240, 250);
}

h1 {  
    color: #444;
    font-size: 23px;
    font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

header {  
    z-index: 128;
    position: fixed;
    top: 0;
    width: 100%;
    padding-left: 8px;
    color: @header-color;
    background: @header-bg;
    height: @header-height;
    line-height: @header-height;
}

.container {
    position: absolute;
    background: #eee;
    width: 100%;
    height: 100%;

    p {
        margin-bottom: 0.5em;
    }

    .content {
        position: absolute;
        top: @header-height;
        bottom: @footer-height;
        width: 50%;
        background: hsla(220, 50%, 50%, 0.5);
        overflow: scroll;
        padding: 12px;
    }

    .contentA {
        background: hsla(220, 50%, 50%, 0.25);
        left: 0px;
    }

    .contentB {
        background: hsla(0, 50%, 50%, 0.25);
        right: 0px;
    }
}

footer {  
    z-index: 128;
    position: fixed;
    bottom: 0;
    width: 100%;
    color: @header-color;
    background: @header-bg;
    height: @footer-height;
    line-height: @footer-height;
    text-align: center;
}

Tips

LESS or CSS の Tips です.

ちゃんと変数化

よく変わるような値, 複数にまたがって使われる値は変数化しておきましょう. プログラミング的な考え方ですね. 今回の例では下記の要素を変数化しています.

  • @header-height ... ヘッダーの高さ
  • @header-color ... ヘッダーのフォントカラー
  • @header-bg ... ヘッダーの背景色
  • @footer-height ... フッターの高さ
  • @footer-color ... フッターのフォントカラー
  • @footer-bg ... フッターの背景色

position:fixedtop:0px/bottom:0px で上下付け画面固定

header, footer のスタイリング部分を見てもらえればわかるかと思いますが position プロパティに fixed を指定しています.
これで要素をスクロールされても固定位置に表示することができます.

さらに, top もしくは bottom に 0px を指定することがで上付けもしくは下付け固定にすることができます.

header {  
    position: fixed;
    top: 0;
}
footer {  
    position: fixed;
    bottom: 0;
}

position:absoluteleft:0px/right:0px で左右付け画面固定

コンテンツ部分も header/footer で使ったテクニック同様 position と left/right プロパティを使って 画面固定しています.

ここで注意点として親要素の width, height を 100% にしています. こうすることで, コンテンツの範囲が画面全体に広がるので, top, bottom にそれぞれ header/footer の高さを指定すると その高さを考慮した最大幅まで広がってくれます.

.container {
    position: absolute;
    width: 100%;
    height: 100%;

    .content {
        position: absolute;
        top: @header-height;
        bottom: @footer-height;
        width: 50%;
        background: hsla(220, 50%, 50%, 0.5);
        overflow: scroll;
        padding: 12px;
    }
}

以上, 備忘録でした.