ネットワーク構築 パソコン設定 サーバ構築 無線LAN構築 名古屋市 豊田市

ホリテック ブログ 最新投稿

ホームページの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を設定していると、下部の影は表示されません。

 

 

 

 

ホームページ