ar0のブックマーク / 2010年4月20日 - はてなブックマーク

ar0 id:ar0

2010年4月20日のブックマーク (3件)

高さ100%のボックス-CSS TIPS
(X)HTMLにおいてブロックレベル要素のheightプロパティに対して%で値を指定した場合反映されません。サンプル CSSの仕様上%は親要素のheightに対しての割合で反映されるので、親要素に対して明示的にheightが指定されていない場合、height:autoが継承されるためです。 html要素とbody要素のheightプロパティに対して100%と明示的に指定しておく事によりheight100%のdiv要素を作成する事ができます。 html,body{ height:100%; } div{ height:100%; } サンプル
ar0 2010/04/20
css

リキッド
リンク
サイドの背景画像を本文にあわせてページの最後まで表示する（2カラム）｜CSS HappyLife
基本的な段組みレイアウトが出来るようになった後に、最初にぶち当たる壁だと思われる、サイドバーの繰り返し。コレって、テーブルレイアウトだと容易に実現出来るのですが、通常CSSで段組みをした場合、サイドバーがメインコンテンツより短いと途中で背景が途切れてしまいます。ソレだと随分いけてないので、ちゃんとメインコンテンツの内容にあわせて表示するようにして上げます。まずは、サンプルをご覧下さいませ。サンプル： http://css-happylife.com/template/02/ 持ち帰り用： http://css-happylife.com/template/02/02.zip 文字サイズを変更して頂ければ、内容にあわせてサイドバーが伸び縮みするのが分かると思います。んでは、どーやって繰り返しているのかの説明をば。サンプルは、メインコンテンツがある #left_container
ar0 2010/04/20
css

リキッド
リンク
1emが何pxなのか自動的に計算する方法(Final) : やむにやまれず
2007年07月24日16:16 by 山崎泰宏 1emが何pxなのか自動的に計算する方法(Final) カテゴリJavaScript Tweet sparklegate Comment(0)Trackback(1) クロスブラウザでなおかつ以前より簡単な方法修正：ソースコードに余計な行が入っていたのを削除しました。以前はgetComputedStyle()に取り憑かれていたのだけど、一つ前のエントリを書いている最中に「あ、もしかして」と違うことを思ったので早速実験してみたらうまくいきました。 1emのdivセクションを設けてあげれば、clientWidthかclientHeight辺りが良い感じにpxの値を返すようです。それだけ！ <html> <head> <title>em2px</title> <script language="javascript" type="text/j
ar0 2010/04/20
1em
リンク
- 2010年4月26日
- 2010年4月20日
- 2010年4月16日