DIV外層をDiv内層で押し広げる

内層divにbuttonがあり、divはフローティングで、外層divの設定の高さはauto(または設定されていませんか?)です.最外周のdiv.bodyにはfloat=left|rightもoverflow-y制御もないので(この2つを加えると後述する問題も解決するようです)、外層divの後の文字がbuttonと並んで押し込まれます.解決策は、外層のdivのheightを設定することであり、もちろん内層divの高さよりも大きい.
 
CSSレイアウトでは、1つのレイヤの中のレイヤがfloatフローティングを使用している場合、次のコードに示すように、外側レイヤが内側レイヤによって拡張されていない場合があります.

 


  
<div style="width:300px; background-color:Red;"> 

  
   

  
  <div style="width:100px; height:100px; background-color:Green; float:left; margin:10px;">  

  
   

  
  </div>  

  
 </div>  

 

この問題を解決するには、外層のCSSに「overflow:auto」を付けることができます.
CSSでoverflowは、コンテンツオーバーフロー要素ボックスがどのように処理されるかを説明するためのものであり、上図から内層が外層からオーバーフローしていることがわかるので、overflowプロパティを使用して内層の表示方法を指す必要がある.overflowプロパティのデフォルト値はvisibleです.つまり、どのようにオーバーフローしても、オーバーフローしたコンテンツは要素ボックスの外に表示されるように切り取られません.
visible値に加えて、overflowプロパティには次の値があります.

hidden:内容が切り取られ、溢れた部分が見えません.

scroll:スクロールバーを使用してオーバーフローした部分を表示し、常にスクロールバーを表示します.

auto:コンテンツを切り取る必要がある場合はscrollに等しく、スクロールバーが表示されます.スクロールバーは表示されません.

inherit:親要素からoverflowプロパティ値を継承します.ただし、以前のIEバージョンでは、IE 8を含む属性値はサポートされておらず、IE 9はまだ試していません.

この例では、外層のCSSにoverflow属性が指定されていないため、デフォルトではvisible、つまりどのようなオーバーフロー法であっても、外層のCSSにoverflow:autoを加算すると、以下のコードに示すように、

 


  
<div style="width:300px; background-color:Red; overflow:auto;"> 

  
   

  
  <div style="width:100px; height:100px; background-color:Green; float:left; margin:10px;">  

  
   

  
  </div>  

  
 </div>  

 

オーバーフローした部分をスクロールバーで表示するのではなく、オーバーフローした部分をスクロールバーで表示するのではなく、overflow:autoを設定すると、外層に内層が含まれていると言う人もいるかもしれません.これは外層の高さを指定していないので適応します.外側の高さを指定し、内側の高さが外側の高さよりも大きい場合は、スクロールバーが表示されます.以下のコードで示します.

 


  
<div style="width:300px; background-color:Red; overflow:auto; height:80px;"> 

  
   

  
  <div style="width:100px; height:100px; background-color:Green; float:left; margin:10px;">  

  
   

  
  </div>  

  
 </div>