Espandi le larghezze degli elementi per far corrispondere la larghezza dello schermo espansa

Question

A question was asked alcuni anni fa, per cui se la larghezza di un elemento è maggiore della larghezza dello schermo, gli altri elementi di blocco (h1 ecc.) Non si espandono per corrispondere (see fiddle per cui la larghezza h1 non non cambiare dopo appare l'elemento di larghezza):

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>

anche se la risposta originale fatto lavoro, ora che CSS3 è più mainstream, mi chiedevo se ci fosse un modo più intelligente per realizzare ° obiettivo, senza ridimensionare manualmente utilizzando JQuery? Ad esempio, esiste una soluzione CSS pura? Non conosco la larghezza dell'elemento in anticipo (è una tabella di dati da un sistema ERP e talvolta può essere molto ampia).

In caso contrario, sono felice di eliminare la domanda, ma non riesco a pensare a un modo per richiamare l'attenzione su un problema più vecchio per cui ora potrebbe esistere una soluzione migliore.

Answer 1

Se body e gli elementi del blocco sono stati espansi per corrispondere alla larghezza di .wide, allora .wide non sarà più 110%. Questo è davvero il nocciolo del problema.

La soluzione più semplice può essere quella di impostare le larghezze di entrambi bodye.wide in pixel, dopo .wide è stato aggiunto al DOM.

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>

Answer 2

Come sapete la larghezza per il vostro elemento larga (in questo caso 110%), si può solo definire il css 'wide'-class per il corpo, invece che per l'elemento inserito , in questo modo:

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; } 

... e poi simplyfy tuoi JS al seguente:

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

... fuori rotta, quando rimuovi l'elemento inserito da dom, devi anche rimuovere la classe 'wide' dal corpo.

Answer 3

Quello che penso che si desideri è impostare la larghezza dell'oggetto genitore di .wide e fare in modo che i figli di quel genitore influiscano sulla larghezza di tutti i suoi figli.

Ho deciso di cambiarlo in modo che invece del nuovo elemento avente la classe wide, ho dato quella classe al suo genitore (body in questo caso) perché il css non ha un selettore genitore, quindi questa sembrava la soluzione più semplice .

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>

è leggermente diverso da come si fare le cose, ma penso che dovrebbe realizzare ciò che si sta cercando di fare

Aggiornamento:

Invece di

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

aggiunta

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

dovrebbe funzionare con le tabelle, ma non sono sicuro se troverete questo meglio di

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

che si stava tentando di evitare.

JSFiddle

Answer 4

Potrebbe funzionare se si imposta la body e lo stile blocco largo quanto segue. È l'unica soluzione pura CSS a cui riesco a pensare.

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>