2013.07.08
css

height:auto; が反映されない時の対処法

CSSでコーディングをするときに、heightをautoにして反映されないことがあるかと思います。

簡単に言ってしまえば、floatを使用しないか、全ての要素でfloatを使用するかで解決します。
しかし、どうしてもfloatを使う要素と使わない要素を使う必要があるときもあります。

そんなときの対応策を3つ紹介します。
css027
言葉で説明するのはとても難しいのですが・・・。
サンプルでイメージが湧くかと思います。

height:auto; が反映されない時の対処法

heightでautoが反映されていない例

まずはheight:autoが反映されない場合のソース。

HTMLソース

<div class="content">
   <p>親要素</p>
   <div class="box1">
      子要素1 
   </div>
   <div class="box2">
      子要素2
   </div>
</div>

CSSソース

.content {/*親要素*/
	background:#bbe2f1;
	width:500px;
	height:auto;
	margin:0 auto;
	padding:5px;
}
.box1 {/*子要素1*/
	width:320px;
	height:auto;
	float:left;
	background:#f19ca7;
	padding:5px;	
}
.box2 {/*子要素2*/
	width:150px;
	height:auto;
	background:#fac559;
	float:right;
	padding:5px;	
}

親要素の中に子要素が完璧に入るようにしたいのに、この場合、子要素がはみ出してしまいます。
floatを指定していない親要素の中にfloatを使用した子要素があるとheightをautoにしても親要素で反映されないのです。
今回はコレの解決策についてです。

解決策その1
floatを使った要素の後にfloatを使わない要素を追加

HTMLソース

<div class="content">
   <p>親要素</p>
   <div class="box1">
      子要素1 
   </div>
   <div class="box2">
      子要素2
   </div>
   <p>ココにfloatなしの要素を追加すると親要素のautoが反映。</p>
</div>

CSSは同じです。
9行目にfloatなしの要素を追加することで、height:autoが反映されます。
今回は<p>ですが、floatを使わないなら<div>でも問題ありません。

解決策その2
clear allを使用する

HTMLソース

<div class="content">
   <p>親要素</p>
   <div class="box1">
      子要素1 
   </div>
   <div class="box2">
      子要素2
   </div>
   <br clear="all" />
</div>

CSSは同じです。
9行目のこの1行は色んな場面で使えます。
clearと言葉の通り設定をクリアにしてくれるのだと思いますが、レイアウトで何かうまくいかないときに記述するとなぜかうまくいったりします。(説明になってませんね…)
CSSに以下を記述して、

.clear { clear:both; }

9行目を以下に入れ替えても同じです。

<div class="clear"></div>

解決策その3
親要素に親要素2をはめ込む

HTMLソース

<div class="content2">
   <div class="content_in">
       <p>親要素に親要素2をはめ込む</p>
       <div class="box1">
           子要素1
       </div>
       <div class="box2">
           子要素2
       </div>
   </div>
</div>

CSSソース

.content2 {/*親要素*/
	margin:0 auto;
	width:510px;
        height:auto;
}
.content_in {/*親要素2*/
	background:#bbe2f1;
	width:500px;
	height:auto;
	float:left;
	padding:5px;
}
.box1 {/*子要素*/
	width:320px;
	height:auto;
	float:left;
	background:#f19ca7;
	padding:5px;
	
}
.box2 {/*子親要素*/
	width:150px;
	height:auto;
	background:#fac559;
	float:right;
	padding:5px;	
}

親要素には左右のmargin:auto;で中央寄せにするよう記述してあります。
親要素2にはfloatを使っています。
また、親要素2は親要素と同じwidthで記述し、HTMLでは親要素の中に親要素2をすっぽりはめ込むイメージです。

MEMO:
今回は親要素2にpaddingを指定してありますが、width自体は同じです。paddingについては以前こちらに書きました。

.box1と.box2については先述のCSSと同じです。

場合によって3つの方法を使い分けるのが良いですね。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP