展开元素宽度以匹配展开的屏幕宽度

Question

几年前提出了一个问题,即如果元素的宽度大于屏幕宽度,那么其他块元素(h1等)不会扩展到匹配(请参阅小提示,即宽元素出现后h1宽度不会改变) :

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

如果body和 其块元素扩展到匹配.wide的宽度，则将.wide不再是 110%。这确实是问题的症结所在。

最简单的解决方案可能是在添加到 DOM后设置body 和 的宽度（.wide以像素为单位） 。.wide

function addElement(){
  $("#para").after('<div class="wide">Wide</div>');
  $("a").fadeOut();
  $('body, .wide').width($('.wide').width());
}

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>