これはブログです。

3DCGとかWebとかカメラとか

この記事は更新されてから1年以上経過しています。

2014/11/02

“footer”を一番下に持ってくる

最近、ページを縦幅いっぱいに表示させているデザインをよく見かけます。TenteroringProjectもそんなデザインにしようと四苦八苦していたわけですが、ようやくできました。ぶっちゃけ大したことないです…。

(斜線部を埋めて縦幅いっぱいに表示させたい)

 

まず、構成としてこのようになっています。

 

<body>

    <div id="wrapper">

        <div id="header">
        </div>

        <div id="menu">
        </div>
        
        <div id="contents" class="clearfix">

            <div id="sidebar">
                
                <div class="box">
                </div>
                
                <div class="box">               
                </div>
                
            </div>
            
            <div id="main">
                
                <div class="box">
                </div>
                
                <div class="box">               
                </div>
                
            </div>
            
        </div>

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

 

大枠として“wrapper”があり、その中に“header”, “contents”, “footer”が。さらに“contents”内には“sidebar”, “main”という構成。記述は“box”に書いてます。

この構成で縦幅いっぱいに表示させるには、CSSに下記を追加する。

 

html, body
{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

#wrapper
{
    height: 100%;
    min-height: 100%;
    position: relative;
}

body > #wrapper{height: auto;}

#contents{padding: 0px 0px 60px 0px;}

#footer
{
    height: 60px;
    position: absolute;
    bottom: 0;
}

 

“html”, “body”, “wrapper”と“height:100%”にする。positionタグにて位置決めを行い、“contents”には“footer”用にpaddingでスペースを作ります。(四苦八苦していた理由はコレでした…)

これにて、縦幅いっぱいに表示できるかと思います。

カテゴリ: プログラミング / タグ:

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

%d人のブロガーが「いいね」をつけました。