Usando lo spazio rimanente con CSS

Question

Sto cercando di impostare un sito Web che consiste in due aree principali: navigazione e contenuto.La parte di navigazione deve prendere l'altezza completa della colonna di sinistra.Il contenuto principale sarà nella colonna di sinistra.Nel tentativo di impostare questo, sto usando il seguente CSS:

<div class="full-height row">
  <div id="navDiv" class="four wide column full-height" style="background-color:#40546C;">
    <!-- Nav COntent goes here -->
  </div>

  <div class="eight wide column">
      Main Content
  </div>    
</div>

.

Ho creato un violino con l'intero esempio qui .Quello che sto cercando di fare nella colonna NAV è tre cose: mostra un titolo, hanno schede allineate contro il fondo dello schermo e il contenuto della scheda richiede lo spazio rimanente.Sfortunatamente, non sto avendo molta fortuna per ottenere questo funzionamento.In particolare, sto avendo problemi a ottenere il contenuto della scheda per riempire lo spazio rimanente e le schede allineate contro il fondo dello schermo.

Il tuo aiuto è molto apprezzato!

Answer 1

Per riferimento futuro, dovresti provare a menzionare che stavi utilizzando un sistema di rete esterna. Mi ci sono voluti un paio di minuti per realizzare cosa stava succedendo e perché c'erano tante classi sulle cose. Non è un grosso problema però: -)

Penso che questo nuovo violino dovrebbe essere abbastanza vicino a ciò che stai parlando, però: thefiddle

Ho dovuto prima impostare l'altezza del corpo e HTML al 100% in modo che i loro figli possano essere anche al 100%. Ho poi flottato il Navdiv a sinistra e ho dato una larghezza del 25%. Puoi modificare quella larghezza se necessario.

#navDiv {
width: 25%;
float: left;
position:relative;
}

.

Ho quindi utilizzato il posizionamento assoluto per ottenere le schede in basso e per ottenere il contenuto della scheda sopra le schede.

Ho aggiunto nuove classi in diversi luoghi per evitare collisioni con la libreria di griglia. Dovevo anche usare un importante per sovrascrivere i margini sulla classe del segmento, dal momento che non volevo rimuovere nulla che stavi usando nella tua griglia.

Potrebbe esserci un modo per raggiungere questo layout usando quella griglia in modo più efficace. Come ho detto, non ne ho familiari, quindi ho appena usato il semplice css.

Proprio come a parte, questa è una mia risorsa preferita per la spazzolatura sul layout CSS. Pensavo potresti trovarlo utile: http://learnlayayout.com/