在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标签创建滚动条 - 我不想那

回答

相关问题