Based on your suggestion (using negative margins), I have tried a similar method that uses percentage units to adjust for dynamic browser width:
HTML:
<div class="grandparent">
<div class="parent">
<div class="child">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
</div>
</div>
</div>
CSS:
.child-div{
margin: 0 -100%;
padding: 0 -100%;
}
.parent {
width: 60%;
background-color: red;
margin: 0 auto;
padding: 50px;
position:relative;
}
.grandparent {
overflow-x:hidden;
background-color: blue;
width: 100%;
position:relative;
}
负边距会让内容流出父级DIV。因此,我设置了
padding: 0 100%;
将内容推回到子DIV的原始边界。
负边距还会使.child-div的总宽度扩展到浏览器视口之外,导致水平滚动。因此,我们需要通过在祖父级DIV(即父级Div的父级)中应用
overflow-x: hidden
来剪切超出的宽度:
这里是JSfiddle。
我尝试过Nils Kaspersson的
left: calc(-50vw + 50%)
;在Chrome和FF中运行得非常好(还不确定IE),直到我发现Safari浏览器无法正确处理它。希望他们能尽快修复这个问题,因为我实际上很喜欢这种简单的方法。
这也可能解决您所遇到的父级DIV元素必须为
position:relative
的问题。
这种解决方法的两个缺点是:
- 需要额外的标记(例如祖先元素(就像旧的表格垂直对齐方法一样...)
- 子DIV的左右边框永远不会显示,因为它们在浏览器视口之外。
如果您发现此方法存在任何问题,请告诉我。希望能帮到您。
position: relative
?你需要position: relative
做什么?我想我想问的是:你想做什么? - thirtydot