Loading...

Single Post

HOME > post > Column > CSSでheight autoが効かない時の対応

CSSでheight autoが効かない時の対応

| Column, Web
ウェブポストイメージ画像

知人より「height:auto;」が反映されないと質問がきました。ウェブを勉強し始めた時、私も同じところでつまづいた経験がありましたので懐かしくなりました。同じような事でお困りの方がいらっしゃる場合、解決に役立て頂ければと思い記事に残す事にしました。

下図の様にheight:auto;が効いてない場、floatが関わっていると思われます。つまりfloatを解除する事ができれば、図左の様にheightが効いた正常な状態になります。

float autoが効かない解決法

まずは、図左の場合のHTMLとCSSを記載します。

<div class="aaa">
    <div class="bbb">
      コンテンツLeft
    </div>
    <div class="ccc">
      コンテンツRight
    </div>
</div>
.aaa{
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
}

.bbb{
	width: 70%;
	float: left;	
}

.ccc{
	width: 25%;
	float: right;	
}

上記のCSSでは、floatを解除できていません。続いて、floatを解除する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;	
}

追記部分でfloatを解除しています。これで、heaight:auto;が正常に効くようになると思います。ちなみに、もう1つ知人に教えて貰った方法を参考までに記載しておきます。

.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;
	
}

まとめ

今回記載させて頂いた内容はウェブ制作において基礎の部分だと思いますが、意外とつまずきやすい場所だと思ったので記載致しました。

関連記事

Contact Page