È necessaria l'altezza della barra laterale CSS per espandersi con il contenuto

StackOverflow https://stackoverflow.com/questions/1610710

  •  05-07-2019
  •  | 
  •  

Domanda

Ho un layout a due colonne, con una barra laterale grigia sulla destra. Ho bisogno che l'altezza della barra laterale si espanda quando viene aumentata l'altezza della colonna di sinistra (a causa dell'espansione dinamica del contenuto). Posso adattare la barra laterale a una pagina statica, ma non riesco a farla aumentare di dimensioni con il resto della pagina. Qualcuno ha cercato su Google, ma non sono riuscito a trovare un modo per aggirare il problema.

Qualcuno sa come farlo?

È stato utile?

Soluzione

Questo è un problema comune quando si utilizza DIVS per questo tipo di layout.

Se google "Colonna Faux" dovresti ottenere alcune risposte.

ad es. http://www.alistapart.com/articles/fauxcolumns/

Altri suggerimenti

Potrebbe essere leggermente disattivato, ma se usi jQuery sul tuo sito puoi eseguire un rapido calcolo e ridimensionare tutti i DIV che condividono una classe simile all'altezza massima: 

$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));

Sono stato perseguitato da questo problema per un po 'e ho scritto un articolo su questo problema: Fatto con colonne false . Ecco cosa ho sostenuto:

  

Soluzione basata su JavaScript per questo   il problema non è peggiore di nessun altro   soluzione. In effetti se stai usando   JavaScript, potresti risparmiare alcune ore   di frustrazione nel cercare di ottenere le cose   lavoro. Le persone ti metteranno in guardia   questo dicendo & # 8220; Cosa succederà se   l'utente ha disattivato JavaScript? & # 8220 ;.   Credetemi, se l'utente ha disattivato   JavaScript, la maggior parte del web è rotta   per lui comunque. La tua barra laterale no   conta per lui.

Come cballou menzionato, il modo più semplice per fare questo è usare il codice JQuery: 

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

Ho cambiato il background-color con lo stesso colore della mia barra laterale, in quella pagina specifica, anche se ho sfondi per tutte le mie sezioni piuttosto che uno sfondo generale. Ma potrebbe non funzionare per tutti.

Nel mio foglio di stile, 

.sidec
{
background-color:#123456;
}

Nella mia pagina HTML, 

<body class="sidec">

content....

</body>

Di recente ho visto una soluzione abbastanza creativa a questo problema utilizzando le proprietà CSS position: absolute e border .

Sicuramente vale la pena dare un'occhiata per vedere se funziona per te.

Link: http: //woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/

Non sono sicuro che questo possa aiutare, dato che sono un principiante. Tuttavia, quando ho difficoltà a ottenere la mia barra laterale per mostrare l'intero contenuto quando ho raddoppiato la sua dimensione ho fatto quanto segue. Stavo cambiando altezza e larghezza senza risposta finché non ho cambiato classe. La mia classe è stata elencata SB frame SB larghezza. Quindi, quando ho cambiato la mia classe per leggere l'altezza SB, la larghezza SB si adattava al mio contenuto anziché alla dimensione del frame originale. Ho anche provato SB max sb larghezza anche con lavorato, ma ha rimosso la barra dei menu del piè di pagina (il che significa che non lo avrebbe più mostrato). Sono tornato a SB altezza SB larghezza e tutto va bene. Sono sicuro che sia super duper elementare per tutti voi, ma nel caso ci sia un altro novellino che legge questo che non capisce molto sul codice HTML come me ... Spero che questo aiuti =) Buone Feste A Tutti! abbracci, tara

Suppongo che tu voglia applicare determinati effetti al tuo layout in modo tale da richiedere il ridimensionamento insieme di entrambe le colonne. Se vuoi cambiare dinamicamente i valori dell'altezza delle colonne, dubito che funzionerà semplicemente con css a meno che non implementi un po 'di javascript per controllare lo stile.

Come suggerito da Dal, guarda il link su colonne false. Come suggerisce il nome, la soluzione non è molto sulla modifica dell'altezza delle colonne. Invece, dà la "illusione" che entrambe le colonne sembrano avere la stessa altezza quando in realtà non lo sono - ed è con l'uso di riquadri dell'immagine di sfondo.

L'idea è che non è necessario complicare il mark-up. Struttura semplice con un tocco di "illusione" con le immagini è una pratica comune nel web design.

Saluti, Jonah

Con la scarsa attitudine verso i nuovi membri qui, mi aspetto di essere sbarrato per questa risposta, ecco qui. Ho risolto questo problema creando un'immagine di sfondo larga 960 pixel alta 1 pixel con i due colori necessari per le colonne nelle rispettive larghezze (780 pixel e 180 pixel). Ho quindi usato questo come immagine di sfondo per il mio contenitore ripetuto sull'asse y e ho reso il contenuto e la barra laterale di destra colore di sfondo: trasparente. 

 .container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto; 
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}

.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}

.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}

Sono sicuro che questo metodo ha i suoi limiti ma funziona perfettamente su tutte le mie pagine.

È possibile che non l'abbia spiegato molto bene, in tal caso, sii gentile con te, per favore. Cercherò di espandere il mio metodo (che probabilmente è già conoscenza comune).

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top