包装器内的全角子 DIV

Question

我会直奔主题。 我有一个宽度为 100% 的子 div，它位于具有固定宽度的包装器下。我想知道如何使子 div “爆发”并具有 100% 的全屏页面宽度。 代码是这样的，我尝试使用相对/绝对定位但没有运气。

<div class="wrapper">
    <div class="banners">
        <div class="first"><img src="http://placehold.it/200x200"></div>
        <div class="second"><img src="http://placehold.it/200x200"></div>
    </div>
</div>

小提琴可以找到here

除了“banners”div 之外，该 div 的上方和下方还有几个部分，这就是“banners”在包装器中的原因

Answer 1

您可以将绝对位置添加到.banners，但这会将.banners 容器定位在与上述元素相关的绝对位置。

.banners {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

一个例子：http://jsfiddle.net/qMYQw/

Answer 2

在您发表评论后，我在此处更新了您的 div：http://jsfiddle.net/qMYQw/1/ 所以你给你的img一个id，这样你就可以很容易地通过js调用它。然后你得到浏览器视口：

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)

然后你改变样式：

var z = document.getElementById('changed');
z.setAttribute('style','width:'+w+'px');

你可以放 z.setAttribute('style','border:1px solid blue;width:'+w+'px'); 如果你想要额外的 CSS。

如果您需要 50%，那么您可以轻松做到这一点：

var w = (Math.max(document.documentElement.clientWidth, window.innerWidth || 0))/2;

您也可以将其应用于其他 div。