2013-07-29 6 views
8

Je suis nouveau à BootStrap afin d'apprendre les ficelles du métier et de le comprendre. J'essaie d'atteindre 100% de hauteur dans la grille de la colonne afin qu'elle couvre 100% de la hauteur de la page. En ce moment, aucune hauteur n'est définie. Lorsque j'essaie de spécifier la hauteur des deux colonnes col-lg-9 et col-lg-3 en pixels ou% aucun changement ne se produit. Je ne sais pas quel pourrait être le problème. Voici la structure de base J'utiliseRéglage de 100% de la hauteur des colonnes dans 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> 

Et voici le css pour chaque élément

@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

essayez de régler la hauteur sur les éléments parents et html et le corps pour commencer – Danield

Répondre

18

essayez ceci:

html,body 
{ 
    height: 100%; 
} 

Si cela ne fonctionne pas, puis utilisez inspecter l'élément et vérifier que les éléments parents ont une hauteur de 100%. (Parce que si elles ne le font pas - alors des éléments enfants ne reçoivent une hauteur de 100% à moins qu'ils ne sont position:absolute ou position:fixed

+0

vote up hauteur Prop en pourcents obtient! de l'élément parent – RDK

+1

qui ne fonctionne pas J'ai défini la hauteur de tous les éléments html, corps, conteneur, ligne et colonnes, mais ne fonctionne pas –

+0

@AhmarAli Je viens d'utiliser inspecter l'élément et ajouté 100% sur html, conteneur de corps, et rangée - et cela a fonctionné, mais quand vous appliquez 100% de hauteur sur la ligne - ne l'ajoutez pas à la classe de ligne mais plutôt à element.style ou bien CHAQUE ligne obtiendra 100% de hauteur! – Danield