Layout fluido CSS: margin-top in base alla percentuale aumenta quando aumenta la larghezza del contenitore

Sto imparando i layout di liquidi CSS & reattivo e sto cercando di utilizzare tutti i valori percentuali senza valori px in un layout.Layout fluido CSS: margin-top in base alla percentuale aumenta quando aumenta la larghezza del contenitore

Finora sembra funzionare, ma in un punto, sto vedendo qualcosa che non mi aspettavo. Sto cercando di mettere un margine tra due div in pila verticalmente che cambia in base all'altezza del contenitore. Mi aspetto che il margine cambi quando ridimensiono la finestra verticalmente, ma cresce anche se lo ridimensioni orizzontalmente, cosa che non voglio. Cosa mi manca?

Ecco un violino. Grazie per il vostro aiuto in anticipo.

http://jsfiddle.net/gregir/aP5kz/

fonte

2012-05-17 Gregir

unità locali finestra per CSS vw, vh 1vw = 1% della larghezza finestra 1VH = 1% dell'altezza finestra – atilkan

In CSS, tutti e quattro i margini: e padding: le percentuali sono relative alla larghezza ... anche se ciò può sembrare assurdo. Questo è solo il modo in cui sono le specifiche CSS, non c'è niente che tu possa fare al riguardo.

Puoi fare quello che vuoi con 'ex' (o 'em'), invece? Questo è il modo in cui sono abituato a vedere i valori "fluidi" per margine/riempimento specificato ... e potrebbe essere meno problematico delle percentuali. (Anche se non ho la pertinente esperienza di prima mano, I sospetto le precisioni estremamente lunghe sui valori percentuali calcolati ti permetteranno di risolvere i problemi di incompatibilità del browser più avanti. Il mio stile è di limitare le percentuali CSS ai numeri interi se a tutto possibile, o occasionalmente forse uno o talvolta forse anche due cifre dopo il punto decimale.)

Se si vuole veramente uno spazio verticale esatto di dimensioni arbitrarie che è una percentuale del contenitore, la prima cosa che mi viene in mente è un div separato < vuoto con una specifica CSS "altezza: nn%". O forse qualcos'altro che stai specificando sta già gestendo le dimensioni verticali come preferisci (dato che sembrerebbe che i margini non stiano davvero facendo nulla su un ridimensionamento verticale).

fonte

2012-05-17 03:34:12

Grazie, Chuck. Avevo davvero bisogno di usare i valori percentuali per i margini, poiché l'interfaccia che sto costruendo fluttuerà molto ampiamente, da grande a piccolo, e se i miei grandi elementi diventano molto piccoli ma c'è un margine di 1em tra di loro, sembra strano. Sui lunghi valori di precisione, ho sollevato l'idea da A List Apart (http://www.alistapart.com/articles/fluid-images/) e non avevo in programma di utilizzare quelli in produzione. In ogni caso, il tuo suggerimento è: un div vuoto ci funzionerà bene; è semplice/elegante, e vorrei aver pensato a me stesso. Grazie ancora! – Gregir

http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width –

@Mr. TA - Posso capire perché le specifiche sono come sono. Se le percentuali di margine superiore e inferiore sono state modificate in modo da essere relative a _height_, mentre le percentuali di margine sinistro e destro sono rimaste relative a _width_, non ci sarebbe modo di specificare margini (e padding) con percentuali, e tuttavia avere uguali _equal_ tutti modo in giro. (È anche la base di uno strano trucco CSS per mantenere le proporzioni di un elemento.) Queste sono scelte difficili; Fai un respiro profondo prima di concludere che sono semplicemente un "difetto di progettazione". –

Sì, è inaspettato e contro-intuitivo, ma funziona come progettato & non ho idea perché funziona come lo fa. Vedi margin-top percentage does not change when window height decreases

fonte

2012-05-17 03:12:44

strano. E mi dispiace di essermi perso questo nella mia ricerca di Stack in precedenza. Non ho idea di come aggirare questo, ma credo che farò meglio a riprendermi. Grazie. – Gregir

Layout fluido CSS: margin-top in base alla percentuale aumenta quando aumenta la larghezza del contenitore

risposta

Problemi correlati