;

しんみゆ.com

群馬県高崎市在住の夫婦で日記というか、つぶやきブログしてます:しんみゆ.com

divで高さを揃えるcss:cssメモ

divで高さを揃えるcss:cssメモ

◆Display: tableを使用してCSSのみで行う方法

横並びにするブロック要素のマージンボトムにパディングのプラス値と同じ値を、パディングボトムにマージンのマイナス値と同じ値を指定

【html】
<!– ボーダーなし –>
<p>
ボーダーなし
</p>
<div class="box_area clearfix">
<div class="box01">
<p>
テキスト
</p>
</div>
<div class="box02">
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
<div class="box03">
<p>
テキスト
</p>
</div>
</div>
<!– /ボーダーなし –>

【css】
<!–more–>
p {
margin: 0; /* 余分なマージンを消去 */
padding: 0; /* 余分なパディングを消去 */
}

div.box_area {
margin: 0 0 40px;
}

div.box_area div {
float: left;
width: 200px;
margin: 0 40px -32767px 0; /* プラス値と同じ値を指定 */
padding: 0 0 32767px; /* マイナス値と同じ値を指定 */
}

div.box_area div.box01 {
background: #EFEFEF;
}

div.box_area div.box02 {
background: #999;
}

div.box_area div.box03 {
background: #CCC;
}

div.box_area div.border {
width: 198px;
border: 1px solid #333;
}

div.box_area div p {
padding: 10px;
}

/* クリアフィックス */
.clearfix:after {
content: "";
display: block;
clear: both;
}

.clearfix {
overflow: hidden;
zoom: 1;
}

参照サイト:高さを揃える

◆どのブラウザでも対応可能な設定方法

【html】
<div class="rightback">
<div class="contentback">
<div class="leftback">
<div class="leftsidebar">…Lots Of Content…</div>
<div class="content"> …Lots Of Content…</div>
<div class="rightsidebar"> …Lots Of Content…</div>
</div>
</div>
</div>

【css】
.rightback {
width: 100%;
float:left;
background-color: green;
overflow:hidden;
position:relative;
}
.contentback {
float:left;
background-color:blue;
width: 100%;
position:relative;
right: 300px; /* width of right sidebar */
}
.leftback {
width: 100%;
position:relative;
right: 400px; /* width of the content area */
float:left;
background-color: #f00;
}

.container {
width: 900px;
margin-left: auto;
margin-right:auto;
}

.leftsidebar {
float:left;
width: 200px;
overflow:hidden;
position:relative;
left: 700px;
}

.content {
float:left;
width: 400px;
overflow:hidden;
position:relative;
left: 700px;
}

.rightsidebar {
float:left;
overflow:hidden;
width: 300px;
background-color:#333;
position:relative;
left: 700px;
}

参照サイト:個別の背景色を使う方法

ページトップ