cssのcalc()を使って、フッターを下部に配置する
cssのcalc()というバリューがあるのですが、これは、css上で数値を計算出来るというものです。
Can I use… Support tables for HTML5, CSS3, etc
例えば、
|
1 2 3 | .box { width: calc(100px - 20px); } |
とするとboxの幅は80pxになります。
計算式としては、加算、減産、乗算、除算ができるということで、
javascriptのように計算が出来るようになるということですね！
これをどのような場面で使えるかというと、いろいろあると思うんですが、
例として、コンテンツがない時に、フッターをブラウザの底に配置することを試してみました。
フッターをpositionでbottomの設定をしていたのですが、
このcalc()を使うと割りと簡単にできるようになります。
calc()を使ってフッターを下部に配置する
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div id="wrapper"> <hgroup> <h1>DEMO</h1> <h2>cssのcalc()を使ってみる</h2> </hgroup> <div class="contents"> <div class="section"> <div class="main">MAIN(幅リキッド)</div> <div class="side">SIDE(幅固定)</div> </div> </div> </div> <div id="footer"> <p>copyright © sterfield All Rights Reserved.</p> </div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | html, body { height: 100%; } #wrapper { width: 100%; min-height: calc(100% - 50px); } #footer { height: 50px; line-height: 50px; background-color: #666; color: #fff; text-align: center; } |
まず、html,bodyをheight100%にします。
そして、#wrapperのmin-heightを100%からフッター分を引きます。
そうすると、フッターはブラウザの下部に配置され、#wrapper内の要素が高くなれば自然とフッターの位置も下に動きます。
2カラムで片方固定で片方をリキッドに
DEMO内で一応もうひとつ例として作ってあります。
これはcalc()を使わずとも出来る方法がいくらでもありますが、一例として。
html
|
1 2 3 4 | <div class="section"> <div class="main">MAIN(幅リキッド)</div> <div class="side">SIDE(幅固定)</div> </div> |
css
|
1 2 3 4 5 6 7 8 | .section .main { float: left; width: calc(100% - 220px); } .section .side { float: right; width: 200px; } |
一つの方法として頭の中に入れておくといいかもしれません！
この計算が出来るというのはSASSやSCSSで使えた便利な機能でもあるので、
それが通常のCSSで出来るのはいいですね！
IEでも9以上から使えるので、
使える場面も既にあると思います。
あとはSASSのようにcssで変数が使えるといいな〜
Author Profile
スターフィールド編集部
SHARE
