Utilizzo della posizione fissa con un framework di layout di griglia

Così sto creando una pagina web, dove i menu sul lato sinistro sono fissi (ti seguono quando scorri verso l'alto e verso il basso nella pagina). Attualmente sto usando il layout di The Grid: Foundation (by zurb) http://foundation.zurb.com/docs/grid.php. Che utilizza una griglia a dodici colonne. Sto riscontrando problemi nel posizionare il layout fisso e nello stesso tempo utilizzare la griglia. Come posso utilizzare un layout di griglia e elementi fissi su una pagina?Utilizzo della posizione fissa con un framework di layout di griglia

<div class="container"> 
    <div class="row"> 
     <div class="four columns relativePosition"> 
       <div class="fixedPosition"> 
        <div class="four columns"> 
         Menu Here 
        </div> 
       </div> 
     </div> 
     <div class="eight columns"> 
       Other Content 
     </div> 
    </div> 
</div>

sono stato in grado di ottenere la posizione fissa di lavorare con tale struttura, ma in alcuni casi il contenuto del menù cresce troppo grande e si sovrappongono i contenuti della colonna di otto. Non so se c'è un modo migliore per farlo?

fonte

2012-02-29 Adim

Trovato questo articolo - ZURB + ScrollSpy. Ho funzionato in 5 minuti. Quello che ho trovato è quello di avvolgere il contenuto della barra laterale in div di scorrimento sotto la posizione della griglia.

fonte

2012-11-20 17:16:42 cosmicdot

Mi sembra che se si sta andando ad avere una componente della pagina che è fissato in ogni caso, la cosa più semplice da fare è tirare che div fuori griglia della 'Fondazione' tutto. Quindi, al di fuori della griglia, puoi posizionarlo come fixed e non interagirà affatto con la griglia. Se anche il menu stesso deve essere una griglia flessibile, rendila unica - basta renderla separata dalla griglia principale.

fonte

2012-03-21 08:57:09 Ian128K

L'utilizzo di javascript per risolvere un problema come questo sembra eccessivo. Vorrei provare a seguire le basi dell'offset utilizzando le classi offset di Foundation come questa:

<div class="row twelve columns"> 
    <div class="two columns" style="position:fixed;top:0;bottom:0;overflow-x:hidden;overflow-y:auto;"> 
    Menu 
    <ul><li>Menu Item</li></ul> 
    </div> 
    <div class="ten columns offset-by-two"> 
    Content goes here 
    </div> 
</div>

Spero che questo aiuti!

fonte

2013-02-19 08:50:10 Marz

non funzionerà. Dire che la dimensione dello schermo è di 1200px. La larghezza della pagina è 1000 px. Se si applica una classe di colonna a un elemento fisso che fornisce una larghezza del 10%, l'elemento fisso otterrà una larghezza di '10% di 1200px = 120px'. Questo perché gli elementi con 'position: fixed' hanno la loro larghezza calcolata rispetto al viewport, non alle div parent. Mentre tutto ciò che non è una posizione fissa otterrà una larghezza del '10% di 1000px = 100px'. –

Utilizzo della posizione fissa con un framework di layout di griglia

risposta

Problemi correlati