webdesign css bootstrap

Bootstrap responsive layout: problema con la scrollbar

Per il layout e la grafica di questo sito ho usato la libreria Twitter Bootstrap.

La versione "responsive" ha una funzione molto utile: cambia il layout del sito in base alla dimensione dello schermo su cui viene visto.

Tutto bene, finché non mi accorgo che alcune pagina hanno un layout diverso, pur avendo la stessa struttura html e gli stessi css.

Alla fine mi accorgo che le pagine "diverse" sono quelle che hanno più contenuti, che si sviluppano in altezza: appare la scrollbar.

In pratica succede questo: quando c'è la scrollbar, utilizza un altro layout! Questo succede perché il mio monitor ha una larghezza di 1280px e una barra laterale (lo ammetto, sono strano) di 80px. Rimangono esattamente 1200px in larghezza per il mio browser. E allora? Bootstrap responsive è fatto per cambiare il layout da fixed a liquid quando la larghezza della finestra è almeno di 1200px. Ma se c'è bisogno della scrollbar, allora la mia finestra diventa più stretta (circa 1180px) e il layout torna a fixed.

Sarò l'unico caso al mondo con un monitor di 1200px di larghezza, ma questa cosa mi da alquanto fastidio. Per evitare il problema alla fine ho fatto così: la scrollbar è sempre visibile. Basta aggiungere questo css:

html {
  overflow: -moz-scrollbars-vertical;
  overflow-y: scroll;
}

Ti è piaciuto l'articolo? Condividilo! Commentalo!

comments powered by Disqus