无论包含元素的样式如何，如何设置元素以填充页面宽度？答案

【问题标题】：How to style element to fill page width, regardless of containing element's styles?无论包含元素的样式如何，如何设置元素以填充页面宽度？
【发布时间】：2014-01-05 18:11:43
【问题描述】：

如何设置元素样式以填充页面（或正文）宽度，即使包含的元素具有边距/填充和相对定位？

换句话说，in this fiddle，在不更改容器或子容器的情况下，如何设置我的蓝色内容 div 的样式以使其文本填满页面宽度？

我觉得position: absolute 很接近，但没有雪茄：我希望相对于整个页面（或正文）宽度进行定位，而不是相对于父元素。有什么想法吗？

【问题讨论】：

页面或网络应用程序是否有垂直滚动功能？如果它在没有垂直滚动的情况下适合窗口，那么您可以使用position: fixed;。但如果网页或应用程序垂直滚动，则固定将不起作用。
是的，它会垂直滚动。感谢您的澄清。
你反对使用jQuery吗？老实说，我不认为你可以用纯 CSS 来实现这一点。至少在当前的 DOM 结构中。
当然。显然，纯 CSS 是最好的，但如有必要，我会使用某种脚本。

标签： css responsive-design

【解决方案1】：

我认为纯 CSS 无法实现您想要做的事情。（至少在你当前的 HTML 结构中）

但是，我提出了这个 jQuery 解决方案：

$(window).resize(function(){
    setContentWidth();
});


function setContentWidth()
{
    var windowWidth = $(window).width();
    var leftOffset = $('.container')[0].offsetLeft;

    $('.content').css({'width': windowWidth, 'left': -leftOffset});
}

setContentWidth();

演示：

http://jsfiddle.net/fg9T4/16/

【讨论】：