ホームページの2カラムのページをそろえる
意外と簡単にできたけど、3年前の自分だと、分からなかったかも・・・・・・
2カラムって言うのは、右か左かにサイドメニューがあるホームページで、メインコンテンツが長くなると、サイドが途中で切れてしまうのを嫌う方がいます。そこで、高さを合わせるのはどうするかっていうと、
サイドにやたらでかいpadding-bottomと、正反対の-(マイナス)値のmargin-bottomを cssに設定。
例えば。cssのサイドが#sideだとして、
#side{ ~~~~~ padding-bottom: 5000px;
margin-bottom: -5000px; } |
って追記して置く。もっと大きくても良いです。
それと、sideと、mainコンテンツを囲むdiv要素に、(例えばcontentsだとして
#contents{ ~~~~~~~ overflow:hidden; }
|
を追記してあげればよいみたいです。
ただし、box-shadowを設定していると、下部の影は表示されません。