Operaでスクロールバーを作成するネストされた拡張divタグ - 私は望みません

Question

別のdivタグの中に入れ子になっている拡張divタグに問題があります。 IEでは、必要に応じて拡張divタグが外側divタグの外側に展開されます。しかし、Chromeでは、内側のdivタグが展開されると、外側のdivタグがスクロールバーを取得します。 IEの場合と同じ動作をしたいです - スクロールバーは表示されず、コンテンツはページの本文の内容と重なっています（結局のところ、ショッピングカートのウィジェットです）。

ここは私のHTMLページのコードです。ここで

<div id="mastheadcontainer"><!-- Begin mastheadontainer --> 
<div id="masthead"><!-- Begin Masthead --> 
    <div id="mastheadcontent"> 
     <div id="googlecart-widget" style="float:right;"></div> 
    </div> 
</div><!-- End Masthead --> 

私のCSSです：

#mastheadcontainer { 
width: 100%; 
margin: 0 auto; 
background-color: #dcb; 
border-bottom:10px solid #0066CC; 
/*margin-bottom:20px;*/} 


#masthead { 
text-align: right; 
width: 960px; 
margin: 0 auto; 
overflow: auto;} 


#mastheadcontent{ 
width:956px; 
height:122px; 
margin:0 auto; 
/*background-image:url('../images/bk-masthead.jpg');*/ 
/*background-repeat:no-repeat;*/ 
background-color:#dcb;} 

どれ勧告クロームで見たときに、内側のdivタグは、IEでの動作に似て展開するように？

おかげで マイク

Answer 1

私はあなたが垂直方向のスクロールについて話していると、それが122個のピクセルを超えたときに、あなたの#mastheadcontentのID内のコンテンツは、スクロールバーが表示されつつあることを前提としています。

私はあなたが最終的な結果は次のようになりますが、ここで私はあなたが探しているものに応じて提案するものであるだろうしたい正確に何を確認していない：

• のdivがするように、コンテナの高さを削除します内部のコンテンツに合わせて展開します。コンテナ内でfloat型を使用しているので、いくつかのメソッドを使用してコンテナをクリアする必要があります。そのうちの1つは、 "overflow：auto;"というプロパティを使用しています。 #mastheadcontentに浮動小数点数をクリアすることに慣れていない場合は、概念を理解するのに役立つWeb上の多数のガイドを参照することをお勧めします。

• コンテンツを境界線よりも先に展開し、コンテナ自体を展開しない場合は、プロパティ "overflow：visible;"を使用することができます。あなたはあなたの問題の解決策を得るために、overflowプロパティでプレイすることをお勧めしますどのような場合には

は、あなたのために物事をクリアする必要があり、ウェブ上の情報がたくさんあります。

これが役に立ちます。

Answer 2

私は自分の質問に答えました。ここに私のサイトの現在のdiv構造である：

<div id="main> 
<div id="mastheadcontainer"><!-- Begin mastheadontainer --> 
<div id="masthead"><!-- Begin Masthead --> 
<div id="mastheadcontent"> 
<div id="googlecart-widget" style="float:right;"></div> 
</div> 
</div><!-- End Masthead --> 
<div id="bodydiv">  
</div><!-- End bodydiv --> 
</div><!-- End main --> 

Chromeでbodydiv要素内のコンテンツの上に展開してgooglecart-ウィジェットを取得するには、私はオーバーフローを追加する必要がありました：内のすべてのdiv要素に見えますマストヘッドコンテナとマストヘッドコンテナ要素に渡します。私の新しいHTMLのdiv構造は次のようになります。

<div id="main> 
<div id="mastheadcontainer" style="overflow:visible;"><!-- Begin mastheadontainer --> 
<div id="masthead" style="overflow:visible;"><!-- Begin Masthead --> 
<div id="mastheadcontent" style="overflow:visible;"> 
<div id="googlecart-widget" style="float:right; overflow:visible;"></div> 
</div> 
</div><!-- End Masthead --> 
<div id="bodydiv">  
</div><!-- End bodydiv --> 
</div><!-- End main --> 

これは、すべての要素のoverflowプロパティを設定やり過ぎのビットかもしれませんが、それが働きました。