2013-07-29 14 views
8

Sono nuovo di bootstrap in modo da imparare le corde e comprenderlo. Sto cercando di ottenere il 100% di altezza nella griglia della colonna in modo che copra il 100% dell'altezza della pagina. Al momento non è impostata alcuna altezza. Quando provo a specificare l'altezza di entrambe le colonne col-lg-9 e col-lg-3 in pixel o% nessuna modifica si verifica. Non so quale potrebbe essere il problema. Qui è la struttura di base che sto usandoRegolazione altezza 100% alle colonne twitter Bootstrap

<body> 
<div class="row"> 
"Top bar" 
</div> 
<div class="container"> 
     <div class="row"> 
     <div class="col-lg-3"> 
side bar 
</div> 

<div class="col-lg-9"> 
side bar 
</div> 

</div> 

E qui è il css per ogni elemento

@media (min-width: 1200px) 
.container { 
max-width: 1170px; 
} 
.row { 
margin-bottom: 20px; 
} 
.col-lg-9 { 
width: 75%; 
padding: 10px 20px; 
border-radius: 0 10px 10px 0; 
-moz-border-radius: 0 10px 10px 0; 
-webkit-border-radius: 0 10px 10px 0; 
-o-border-radius: 0 10px 10px 0; 
border: 0 none; 
padding-top: 3%; 
min-height: 90%; 
} 
.col-lg-3 { 
width: 25%; 
background-color: #192D38; 
color: #88A7A9; 
min-height: 90%; 
} 
+1

provare a impostare l'altezza su elementi padre e html e corpo per cominciare – Danield

risposta

18

provare questo:

html,body 
{ 
    height: 100%; 
} 

Se questo non funziona, quindi utilizzare ispezionare l'elemento e verificare che gli elementi parent siano alti al 100%. (Perché se non lo fanno - allora gli elementi figli non ottengono altezza 100% a meno che siano position:absolute o position:fixed

+0

votare fino all'altezza Prop in percentuale ottiene! dall'elemento genitore – RDK

+1

non funziona ho regolato in altezza per tutte le colonne elementi html, body, contenitore, di riga e poi ma non funziona –

+0

@AhmarAli ho usato ispezionare elemento e aggiunto 100% su html, corpo contenitore, e la fila - ed ha funzionato Tuttavia quando si applica l'altezza al 100% sulla fila -. non aggiungere alla classe fila ma piuttosto di element.style altrimenti ogni riga otterrà altezza 100% – Danield

Problemi correlati