全宽子DIV内包装 [英] Fullwidth child DIV inside wrapper

问题描述

我会直接去点。
我有一个孩子的div，宽度为100％，它位于包装器下面有一个固定的宽度。我想知道如何使孩子div突围，并有100％的全屏幕页面宽度。
这样的代码，我试着玩相对/绝对定位，但没有运气。

I will go straight to the point. I have a child div that has width of 100% and it is located under wrapper that has a fixed width.I was wondering how can i make the child div "break out" and have 100% full screen page width. Code goes like this, i tried playing with relative/absolute positioning but no luck.

<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>

可以找到小提琴此处

在bannersdiv旁边，上面和下面的div都有几个部分，正在包装

Beside "banners" div, there are few more sections both above and bellow that div, thats the reason it "banners" are in wrapper

推荐答案

注释后，我更新了您的div： http://jsfiddle.net/qMYQw/1/
所以你给你的img的id，所以你可以很容易地调用它的js。然后你得到浏览器视口：

After your comment I updated your div here: http://jsfiddle.net/qMYQw/1/ So you give an id to your img so you can easily call it by js. Then you get the browser viewport:

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

，然后更改样式：

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

你可以把
z.setAttribute

you can put z.setAttribute('style','border:1px solid blue;width:'+w+'px'); if you want additional css.

如果你需要50％的额外的CSS，那么你可以很容易地这样做：

If you need 50% then you can easily do this:

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

也可以将其应用到其他div。

Also you can apply the same to the other div.

这篇关于全宽子DIV内包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！