Single Post
CSSでheight autoが効かない時の対応
知人より「height:auto;」が反映されないと質問がきました。ウェブを勉強し始めた時、私も同じところでつまづいた経験がありましたので懐かしくなりました。同じような事でお困りの方がいらっしゃる場合、解決に役立て頂ければと思い記事に残す事にしました。
下図の様にheight:auto;が効いてない場、floatが関わっていると思われます。つまりfloatを解除する事ができれば、図左の様にheightが効いた正常な状態になります。
まずは、図左の場合のHTMLとCSSを記載します。
[html]
<div class="aaa">
<div class="bbb">
コンテンツLeft
</div>
<div class="ccc">
コンテンツRight
</div>
</div>
[/html]
[css]
.aaa{
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
}
.bbb{
width: 70%;
float: left;
}
.ccc{
width: 25%;
float: right;
}
[/css]
上記のCSSでは、floatを解除できていません。続いて、floatを解除するCSSを追記します。
[css]
.aaa{
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
clear: both;
display: block;
}
.bbb{
width: 70%;
float: left;
}
.ccc{
width: 25%;
float: right;
}
[/css]
追記部分でfloatを解除しています。これで、heaight:auto;が正常に効くようになると思います。ちなみに、もう1つ知人に教えて貰った方法を参考までに記載しておきます。
[css]
.aaa{
width: 100%;
max-width: 100%;
height: auto;
overflow: hidden; /*floatの解除、ここがポイント*/
position: relative; /*DWで正常にプレビューできるようになります。*/
zoom:1; /*IE6でレイアウト崩れを防ぐためのものです。*/
}
.bbb{
width: 70%;
float: left;
}
.ccc{
width: 25%;
float: right;
}
[/css]
まとめ
今回記載させて頂いた内容はウェブ制作において基礎の部分だと思いますが、意外とつまずきやすい場所だと思ったので記載致しました。
