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

Question

A question was asked几年前，如果元素的宽度大于屏幕宽度，则其他 block 元素(h1 等)不会扩展以匹配(see fiddle，即 h1 宽度在 wide 元素出现后不会改变):

function addElement(){
    $("#para").after('<div class="wide">Wide</div>');
    $("a").fadeOut();
    // $("h1").width($(".wide").width()); // <-- trying to avoid needing this
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Header 1</h1>
<p id="para">
    <a href="#" onclick="addElement(); return false;">Add wide element</a>
</p>

虽然最初的答案确实有效，但现在 CSS3 更主流了，我想知道是否有更聪明的方法来实现目标，而无需使用 JQuery 手动调整大小？比如有没有纯CSS的方案？我事先不知道元素的宽度(它是来自 ERP 系统的数据表，有时可能会很宽)。

如果不是，我很乐意删除该问题，但想不出一种方法将人们的注意力拉回旧问题，而现在可能存在更好的解决方案。

Answer 1

我认为您想要的是设置 .wide 的父对象的宽度，并让该父对象的子对象影响其所有子对象的宽度。

我决定改变它，而不是你的新元素有类 wide，我把那个类给它的父类(在这种情况下是 body)，因为 css 没有没有父选择器，所以这似乎是最简单的解决方案。

function addElement(){
    $("#para").after('<div class="foo">Wide</div>'); // <-- updated
    $("a").fadeOut();
    $("body").addClass("wide"); // <-- new
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Header 1</h1>
<p id="para">
    <a href="#" onclick="addElement(); return false;">Add wide element</a>
</p>

它与你做事的方式略有不同，但我认为它应该完成你正在尝试做的事情

更新:

代替

$("body").addClass("wide");

添加

$("#para").parent().addClass("wide");
$("#para").parent().width($("#para").parent().width()*1.1);

应该与表格一起使用，但我不确定您是否会发现它比

$("h1").width($(".wide").width());

你试图避免的。

JSFiddle