忍者ブログ

デザプロブロ

デザインで出た問題の対応法の備忘録です。主にHTML、CSSかな？

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

DIVの高さを揃える。

DIVの高さを揃える典型的な調整方法です。
SAMPLE
ポイントは対象DIVテーブルにmagin-bottom、padding-bottomを設定。
  padding-bottom: 32767px;
  margin-bottom: -32767px;
親テーブルに
  overflow: hidden; 
を設定することで実現できます。
<style type="text/css">

#test{
  overflow: hidden;  
}

#test div{
  padding-bottom: 32767px;
  margin-bottom: -32767px;
}
</style>
<link rel="stylesheet" type="text/css" href="http://st.shinobi.jp/img/services/homepage/commercial.css" /></head>

<body>

<div id="test" style="border: double 10px #aaaaaa;">
<div style="border: double 10px #0000ff;float:left;">
hoge<br/>
hoge<br/>
hoge<br/>
hoge<br/>
hoge<br/>
hoge<br/>
hoge<br/>
hoge<br/>
hoge<br/>
</div>
<div style="border: double 10px #666666;float:left;">hoge</div>
</div>

ただ問題点は、下のボーダーがhidden内に入ってしまうことです。
borderを使うとデザインが崩れてしまいますね。