CSS santo grail - problema con 2 colonne fisse/1 fluido

Okay, quindi ho lavorato sull'implementazione del layout in stile "Santo Graal" per il mio sito Web, finora è abbastanza vicino ma ho notato due cose che voglio risolvere.CSS santo grail - problema con 2 colonne fisse/1 fluido

L'obiettivo è un piè di pagina "appiccicoso" con la lunghezza della pagina che si espande con l'altezza della finestra del browser, un'intestazione e 3 colonne. 2 colonne fisse sul lato sinistro e destro e una colonna fluida nel mezzo.

I problemi che sto avendo sono proprio ora, la colonna "fluido" del mio centro non sembra agire come mi aspettavo. Fondamentalmente voglio che le colonne fisse vengano sempre mostrate completamente, con la colonna centrale che riempie lo spazio orizzontale rimanente. Ma la colonna centrale occupa molto spazio e lo fa in modo che devo scorrere per visualizzare la colonna destra (vedi immagine sotto). Inoltre, il codice "text-align: center" non sembra centrare il testo all'interno dell'area visibile della colonna centrale. Qualsiasi aiuto apprezzato!

immagine: http://i.imgur.com/FPuSiIu.png

html:

<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="test.css" /> 
    </head> 
    <body> 
     <div id="header"> 
      <p>Header</p> 
     </div> 
     <div id="container"> 
      <div id="center"> 
       <p>Content</p> 
      </div> 
      <div id="left"> 
       <p>Content</p> 
      </div> 
      <div id="right"> 
       <p>Content</p> 
      </div> 
     </div> 
     <div id="footer"> 
      <p>Footer</p> 
     </div> 

    </body> 
</html>

css:

* { 
    margin: 0; 
} 

#container { 
    width:100%; 
} 

#header { 
    text-align: center; 
    background: #5D7B93; 
    height: 95px; 
    padding: 5px; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 15; 
} 
#center{ 
    text-align: center; 
    margin-top: 105px; 
    background: red; 
    position: relative; 
    float: left; 
    width: 100%; 
    height: 100%; 
} 
#left { 

    height: 100%; 
    width: 150px; 
    text-align:center; 
    background:#EAEAEA; 
    margin-top: 105px; 
    margin-left: -100%; 
    overflow: scroll; 
    position: relative; 
    float: left; 
} 

#right { 
    position: relative; 
    height: 100%; 
    width: 150px; 
    margin-right: -100%; 
    margin-top: 105px; 
    background: blue; 
    text-align: center; 
    float: left; 
} 
#footer { 
    text-align:center; 
    background: #5D7B93; 
    height:25px; 
    padding:5px; 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
}

fonte

2013-03-04 Caleb

sono andato un percorso diverso utilizzando il posizionamento: http://jsfiddle.net/ExplosionPIlls/ANZct/ –

Non c'è bisogno di float. Solo position: absolute le barre laterali e dare il margine fisso div centrale su entrambi i lati.

JSFiddle

CSS

#container{ 
    position: relative; 
} 

#left, #right { 
    width: 200px; 
    height: 100%; 
    position: absolute; 
    top: 0; 
} 

#left { 
    left: 0; 
} 

#right { 
    right: 0; 
} 

#center { 
    margin: 0 200px; 
}

fonte

2013-03-04 05:30:11 thgaskell

@Caleb: mi piacerebbe andare con questa implementazione se è possibile – Jace

ho fatto questo sul mio layout e funziona bene per me

body, 
html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#container{ 
    display: inline-flex; 
    width: 100%; 
    height: 100%; 
    background: lightblue; 
} 

#left { 
    width: 240px!important; 
    min-width: 240px!important; 
    background: red; 
    height: 100%; 
} 

#right { 
    width: 400px!important; 
    min-width: 400px!important; 
    background: red; 
    height: 100%; 
} 

#center { 
    background: blue; 
    width: 100%; 
    min-width: 600px; 
    height: 100%; 
}

fonte

2014-03-17 18:53:04 flaalf

CSS santo grail - problema con 2 colonne fisse/1 fluido

risposta

Problemi correlati