让子div跨越页面宽度

Question

假设我有以下HTML代码:

<div id="container" style="width: 960px">
   <div id="help_panel" style="width: 100%; margin: 0 auto;">
     Content goes here.
   </div> 
</div>

如果我希望help_panel div延伸到页面/ broswer的宽度,即使页面/浏览器的宽度大于960px(这是为容器div设置的宽度),是否可以使用以上结构？如果页面宽度超过960px,我想让帮助面板div扩展到容器div中设置的宽度限制之外.

我很好奇是否可以用上述结构来完成.或者我是否必须将help_panel div放在容器div之外才能使其工作？

谢谢!

Answer 1

是的,可以做到.你需要使用

position:absolute;
left:0;
right:0;

查看http://jsfiddle.net/bJbgJ/3/上的工作示例

如果您正在设置的子级具有设置为position的父级:相对不是页面的整个宽度,则此方法不起作用. (9认同)
这有效,但没有考虑全宽度元素之后的任何内容(请参阅@ esel的[answer](http://stackoverflow.com/a/5590260/863846)).是否可以做这样的事情,但仍会影响其他内容？ (5认同)

Answer 2

使用当前的浏览器(这个问题现在有点约会),您可以使用更简单的vw(视口宽度)单位:

#help_panel {
  margin-left: calc(50% - 50vw);
  width: 100vw;
}

从我的测试来看,这不应该在易于使用的情况下破坏你的流量.

这很好.更好的是不使用calc:https://coderwall.com/p/hkgamw/creating-full-width-100-container-inside-fixed-width-container (2认同)
我喜欢它！也许最好补充一点，它仅在包含父项位于页面中心的情况下才有效（它让我摸不着头脑一段时间它是如何工作的）。基本上，“margin-left: 50%”将父容器的左边距居中（如果父容器居中，则为页面的中心），然后“-50vw”将其向左移动半页。 (2认同)