Blog

cssのcalc()を使って、フッターを下部に配置する

2015.12.15Cat:css3 デザイナー
Can I use... Support tables for HTML5, CSS3, etc

cssのcalc()というバリューがあるのですが、これは、css上で数値を計算出来るというものです。

Can I use… Support tables for HTML5, CSS3, etc

 

例えば、

とするとboxの幅は80pxになります。

計算式としては、加算、減産、乗算、除算ができるということで、
javascriptのように計算が出来るようになるということですね!

これをどのような場面で使えるかというと、いろいろあると思うんですが、
例として、コンテンツがない時に、フッターをブラウザの底に配置することを試してみました。

DEMO

フッターをpositionでbottomの設定をしていたのですが、
このcalc()を使うと割りと簡単にできるようになります。

calc()を使ってフッターを下部に配置する

html

css

まず、html,bodyをheight100%にします。
そして、#wrapperのmin-heightを100%からフッター分を引きます。
そうすると、フッターはブラウザの下部に配置され、#wrapper内の要素が高くなれば自然とフッターの位置も下に動きます。

2カラムで片方固定で片方をリキッドに

DEMO内で一応もうひとつ例として作ってあります。
これはcalc()を使わずとも出来る方法がいくらでもありますが、一例として。

html

css

一つの方法として頭の中に入れておくといいかもしれません!
この計算が出来るというのはSASSやSCSSで使えた便利な機能でもあるので、
それが通常のCSSで出来るのはいいですね!

IEでも9以上から使えるので、
使える場面も既にあると思います。

あとはSASSのようにcssで変数が使えるといいな〜

Author Profile

abe
abe
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ