整个页面的父元素是一个居中的div,限制为最大宽度为960px.页面上的所有其他元素都是该父div的子元素.简化的结构如下:
<div id="parent">
<div id="something"></div>
<div id="wide-div></div>
<div id="something-else></div>
</div>
虽然父div不应该扩展到960px的宽度,但我在这里称为"wide-div"的div应该填满整个屏幕宽度.它包含一个比960px宽的单个图像,它应该为整个屏幕宽度设置不同的背景颜色.
我不能轻易地从父div中取出那个div,它会弄乱我的布局的其他部分,这会使整个事情变得相当尴尬.
我发现了一些关于如何实现这一目标的技巧,但似乎没有一个符合我的要求.我的设计很敏感,或者至少我试图实现这一目标.我发现的技巧依赖于知道所涉及元素的大小,这在我的情况下并不固定.
有没有办法在响应式布局中将内部div扩展到全屏宽度？
假设我有以下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之外才能使其工作？
谢谢!