在Opera中嵌套的擴展div標籤創建滾動條 - 我不想那

我遇到了嵌套在另一個div標籤中的擴展div標籤的問題。在IE中，擴展的div標籤在需要時擴展到外部div標籤之外。但是，在Chrome中，當內部div標記展開時，會導致外部div標記獲取滾動條。我希望行爲與IE相同 - 不會出現滾動條，並且內容與頁面的正文內容重疊（畢竟它只是購物車窗口小部件）。在Opera中嵌套的擴展div標籤創建滾動條 - 我不想那

這是我的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的行爲？

感謝邁克

來源

2012-04-07 M_66

我假設你是在談論垂直滾動和你的#mastheadcontent ID內的內容正在滾動條出現在超過122個像素。

我不知道你想要的是什麼，最終的結果會像，但這裏是我建議根據你所尋找的東西：

取出容器的高度，使得DIV會展開以適應它內部的內容。請注意，由於您在容器中使用浮動內容，因此必須使用多種方法清除容器，其中一個方法是使用屬性「overflow：auto;」 #mastheadcontent上。如果您不熟悉清理浮動塊，我建議您查看網絡上的衆多指南以幫助您理解這個概念。
或者您希望內容擴展超過邊界但不擴展容器本身，在這種情況下您可能想使用屬性「overflow：visible;」。

在你可能想用overflow屬性發揮得到解決您的問題任何情況下，有足夠的應搞清楚你在網絡上的信息。

希望這會有所幫助。

來源

2012-04-07 05:21:51 rablanchet

嗨，我想內容擴大超過邊界，但不擴大容器。我已將溢出屬性更改爲可見，但仍然無法在Chrome中使用。現在的代碼是IE沒有問題。儘管我還沒有在Firefox中檢查過。在我的例子中，當內部div展開時，它會導致垂直和水平滾動條。 – 2012-04-07 05:47:10

我解決了我自己的問題。我基本上有一個主要的div標籤，其中，我有一個div標籤，其中包含多個標籤內容的div標籤。在那之下，我有一個body div標籤，它包含多個body標籤。要在標題中獲得特定的div標籤，請在body div標籤的頂部展開，我必須爲所有head div標籤設置OVERFLOW：VISIBLE。它的工作原理現在我沒有在Chrome中獲得滾動條。 – 2012-04-07 15:05:50

我回答了我自己的問題。這裏是我的地盤當前的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 -->

要獲得googlecart的小部件上在Chrome中bodydiv元素內容的頂部擴大，我不得不溢出補充：可見於所有的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 -->

這可能有點矯枉過正設置所有元素的溢出屬性，但它的工作。

來源

2012-04-07 15:20:12

在Opera中嵌套的擴展div標籤創建滾動條 - 我不想那

回答

相關問題