0

我遇到了嵌套在另一个 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 标签在 chrome 中查看时扩展类似于 IE 中的行为？

谢谢迈克

4

2 回答 2

0

我回答了我自己的问题。这是我网站的当前 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-widget 在 Chrome 中的 bodydiv 元素的内容顶部展开，我必须在 mastheadcontainer 中的所有 div 元素和 mastheadcontainer 元素中添加溢出：可见。我的新 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-07T15:20:12.377 回答
0

我假设您正在谈论垂直滚动，并且您的#mastheadcontent id 中的内容在超过 122 像素时会出现滚动条。

我不确定您想要的最终结果到底是什么样的，但根据您要寻找的内容，我建议您这样做：

  • 移除容器的高度，以便 div 扩展以适应其中的内容。请注意，由于您在容器内使用浮动，因此您必须使用多种方法清除容器，其中一种方法是使用属性“溢出：自动；” 在#mastheadcontent 上。如果您不熟悉清除浮动，我建议您查看网络上的大量指南以帮助您理解这个概念。

  • 或者您希望内容扩展超出边界但不扩展容器本身，在这种情况下，您可能需要使用属性“溢出：可见；”。

在任何情况下，您都可能想使用溢出属性来解决您的问题，网络上有很多信息可以为您解决问题。

希望这可以帮助。

于 2012-04-07T05:21:51.420 回答