logo标签列表

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

css
6

几年前曾有这样一个问题被提出：如果一个元素的宽度大于屏幕宽度，那么其他块级元素（如h1等）不会扩展以匹配该元素（请参见fiddle，在宽元素出现后，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系统的数据表，有时可能非常宽）。
如果没有，我很乐意删除这个问题，但无法想到一种方法来重新引起对旧问题的关注，因为现在可能存在更好的解决方案。
可以考虑在其他问题上提供悬赏吗？ - Alvaro Montoro
一旦CSS4发布，可能会有一个简单的仅使用CSS的解决方案。不幸的是，我认为目前没有任何浏览器支持这种类型的父选择器。 - Ben L.
4个回答
3
我认为您想要做的是设置.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

这非常不错。唯一的问题是我事先不知道宽度（该元素是来自ERP系统的数据表，有时可能非常大）。 - EvilDr
1
如果 body 及其块级元素扩展到与 .wide 的宽度匹配，则 .wide 将不再是 110%。这真正是问题的关键。
最简单的解决方案可能是在将 .wide 添加到 DOM 后，以像素为单位设置 body 和 .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>

非常整洁，谢谢。在阅读了你的代码之前，我甚至不知道 VW 单元存在！ - EvilDr
天啊，vw 是之前尝试的遗留物，而且我在最终代码中甚至没有使用它。现在已经编辑过了。（但我很高兴你发现了 vw 单位！） - Rick Hitchcock
奇怪的问题，但为什么这个替代方法不起作用：$（'body'）.width（$（'.wide'）.width（））;。我弄不清楚为什么我需要将.wide的宽度设置为自身，以及设置body宽度。 - EvilDr
1
width()方法设置像素宽度。如果您没有设置.wide的宽度，它将保持在110％。因此，当body变宽以匹配其宽度时，.wide会再次增长以保持比body宽10％。 - Rick Hitchcock
1
捂脸！是的，当然会这样——那很有道理！谢谢 :-) - EvilDr
我的原始解释还有很多需要改进的地方。我现在已经更新了它，明确提到代码设置宽度为像素。 - Rick Hitchcock
1
如果你按照以下方式设置 body 和广场块样式，它可能会起作用。这是我所能想到的唯一的 纯CSS 解决方案。 JSFIDDLE DEMO 

function addElement() {
    $("#para").after('<div class="wide">Wide</div>');
    $("a").fadeOut();
}
body {
    margin: 0;
    display: inline-block; /*key*/
    min-width: 100%; /*key*/
}
h1 {
    background-color: #ccc;
}
.wide {
    background-color: #00c;
    color: #fff;
    min-width: 1000px; /*percentage won't work, but vw works i.e. 110vw */
    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>

抱歉，我这周一直在忙于工作。我喜欢这个，但是将body设置为inline-block感觉不太对（纯属个人意见）。然而，它确实允许不提前知道宽度，这很好，但是我并没有要求一个纯粹的 CSS解决方案，只是想知道是否存在这样的解决方案或者任何现代方法。谢谢你的建议。 - EvilDr
0

正如您所知，对于宽元素（在本例中为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; }

...然后将您的JS简化为以下内容：

function addElement(){
    $('body').addClass('wide').find("#para").after('<div>Wide</div>');
    $("a").fadeOut();
}

当然，当您从DOM中删除插入的元素时，还必须从body中删除“wide”类。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接