これはブログです。

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

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

2014/11/02

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

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

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

 

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

 

 

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

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

 

 

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

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

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

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

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