Css 扩展元素宽度以匹配扩展的屏幕宽度

几年前，如果一个元素的宽度大于屏幕宽度，则其他块元素（h1等）不会扩展以匹配（在宽元素出现后h1宽度不会改变）：

函数addElement（）{
$（“#段”）。在（'Wide'）之后；
$（“a”）.fadeOut（）；
//$（.h1”）.width（$（.wide”）.width（）；//如果
主体
及其块元素扩展到匹配
.wide
的宽度，那么
.wide
将不再是110%。这确实是问题的症结所在

最简单的解决方案可能是在将
.wide
添加到DOM后，以像素为单位设置
主体
和
.wide
的宽度


函数addElement（）{
$（“#段”）。在（'Wide'）之后；
$（“a”）.fadeOut（）；
$（'body.wide'）.width（$（'.wide'）.width（））；
}
body{margin:0；padding:0；}
h1{背景色：#eee；}
.wide{背景色：#00c；颜色：#fff；宽度：110%；页边距顶部：1em；页边距底部：1em}

标题1

您知道wide元素的宽度（在本例中为110%），您可以只为body定义css“wide”类，而不是为插入的元素定义，如下所示：

body { margin:0; padding:0 }
body.wide { width:110%; } //<<< new
h1 { background-color:#eee; }
div { background-color:#00c; color:#fff; margin-top:1em; margin-bottom:1em; }

body{margin:0；padding:0}
body.wide{width:110%；}/我认为您需要设置
.wide
的父对象的宽度，并让该父对象的子对象影响其所有子对象的宽度

我决定对它进行更改，以取代新元素的类
宽
，我将该类交给它的父类（
在本例中为body
），因为css没有父选择器，所以这似乎是最简单的解决方案


函数addElement（）{
$（“#para”）。在（'Wide'）；/之后，如果您按如下方式设置
主体和宽块样式，则它可以工作。这是我能想到的唯一纯CSS解决方案



函数addElement（）{
$（“#段”）。在（'Wide'）之后；
$（“a”）.fadeOut（）；
}
正文{
保证金：0；
显示：内联块；/*键*/
最小宽度：100%；/*键*/
}
h1{
背景色：#ccc；
}
.宽{
背景色：#00c；
颜色：#fff；
最小宽度：1000px；/*百分比不起作用，但vw起作用，即110vw*/
边缘顶部：1米；
边缘底部：1米；
}

标题1

在另一个问题上提供悬赏如何？一旦CSS4命中，一个简单的仅CSS的解决方案可能是可能的。不幸的是，我认为当前的浏览器不支持这种类型的父选择器。这很好。唯一的问题是我事先不知道宽度（元素是一个ERP系统的数据表，有时可能非常庞大）这非常简洁，谢谢。我甚至不知道大众单位的存在，直到我读了你的代码！哦，天哪，
VW
是从早期尝试中遗留下来的，我甚至没有在我的最终代码中使用它。现在编辑。（但我很高兴你发现了
vw
units！）一个奇怪的问题，但为什么这个问题不能作为替代：
$（'body'）.width（$（'wide'）.width（））；
。我不明白为什么我需要将
.wide
的宽度设置为自身，以及设置
body
宽度。
宽度（）
方法以像素为单位设置宽度。如果不设置
.wide
的宽度，它将保持在110%。因此当
主体
加宽以匹配其宽度时，
.wide
将再次增长，以保持比
主体
主体
宽10%的宽度。Facepalm！是的，当然会-这很有道理！谢谢：-）抱歉，我已经工作了整整一周。我喜欢这样，但由于某些原因，将body设置为inline block感觉不太好（严格来说是IMHO）。但是，它允许事先不知道宽度，这很好，但是，我不是要求一个纯CSS解决方案，只是想知道是否存在一个，或者任何现代的方法。谢谢你的建议。
function addElement(){
    $('body').addClass('wide').find("#para").after('<div>Wide</div>');
    $("a").fadeOut();
}