0

我设法溢出了一个父 div，它是一个带有以下 CSS 的内容包装器，但是现在这个 div 隐藏了它后面的内容。我怎样才能做到这一点？

jsfiddle：http: //jsfiddle.net/YMSvU/

我的 HTML 文件

<div class="contentwrapper">
  <div class="promotional_outer">
    <div class="promotional">
    ...
    </div>
  </div>
  <div class="footer">
  ... this footer is overflown by the promotional div ...
  </div>
</div>

我的 CSS 文件

.contentwrapper {
    width: 1150px;
    text-align: left;
    margin: 0px auto;
}
.promotional_outer{
    background-color: #8fcbe5;
    position:absolute;
    left: 0;
    width: 100%;
    overflow: auto;
    margin: 0px auto;
    clear: both;
}
.promotional {
    background-color: #30a3da;
    padding: 75px;
    color: #fff;
    width: 1000px;
    margin: 0px auto;
    clear: both;
}

这说明了问题

4

5 回答 5

1

我目前正在处理的网站上遇到了完全相同的问题。

原来唯一的解决方案是这样做：

<div class="wrapper">
    <div class="header">
    ...
    </div>
</div>
<div class="promotion_outer">
    <div class="wrapper">
        <div class="promotion_inner">
        ...
        </div>
    </div>
</div>
于 2013-06-25T16:17:19.023 回答
1

我认为最好调整你的html来做这样的事情：

<div class="inner">
    <p>Content</p>
</div>

<div class="promo">
    <div class="promo--inner">
        <p>Content</p>
    </div>

    <div class="promo--callout">
        <p>Promo callout</p>
    </div>
</div>

<div class="inner  footer">
    <p>Footer content</p>
</div>

看看这个小提琴：http: //jsfiddle.net/kFShb/2/

于 2013-06-25T16:25:48.393 回答
0

您可以使用 绕过元素的流z-index。

.footer {
    position: relative;
    z-index: 10;
}

小提琴

于 2013-06-25T15:26:10.910 回答
0

position: absolute从中删除.promotional_outer。

绝对定位从正常的文档流中移除一个元素。

于 2013-06-25T15:27:03.460 回答
0

只需删除position: absolute;并left: 0;在您的 CSS 中

.promotional_outer{
    background-color: #8fcbe5;
    width: 100%;
    overflow: auto;
    margin: 0px auto;
    clear: both;
}

这应该可以解决您的问题。

于 2013-06-25T15:28:07.927 回答