Twitter Bootstrap 3 réactif hauteur de la grille
Tout d'abord, désolé pour mon mauvais anglais :S. je veux un réactif de toute la hauteur de la grille en utilisant bootstrap 3. Mon problème est la grille, je ne sais pas comment mettre 100% de la hauteur du conteneur et de l'intérieur de la vrd. La largeur est parfait, mais la hauteur :S.
J'ai essayer avec ce CSS mais ça ne fonctionne pas:
html body .container-fluid{
min-height:100%;
height:100%;
}
.border3{
min-height:20%;
height:20%;
}
.border4{
min-height:20%;
height:20%;
}
.border5{
min-height:20%;
height:20%;
}HTML+CSS: http://jsfiddle.net/z5dpu7od/1/
Peut-être que je peux résoudre ce problème avec le JavaScript. Je peux prendre le navigateur de la hauteur et de l'appliquer .récipient de liquide élément, mais je veux l'essayer avec CSS.
Merci pour votre réponse :).
OriginalL'auteur mrroot5 | 2014-08-09
Vous devez vous connecter pour publier un commentaire.
Briser votre contenu dans des groupes de lignes que vous pouvez utiliser pour définir la hauteur de chaque regroupement. Hauteur en css ne fonctionne que si l'élément ancêtres ont tous une hauteur définie. Ainsi, dans la démo, vous pouvez voir que j'ai regroupées vos éléments en trois principaux groupes de lignes: menus (que j'ai fixé à 80% de la fenêtre/fenêtre d'affichage de la hauteur), les liens de navigation (qui est fixé à 5%) et la marque (qui est fixé à 15%). Ce faisant, vous permet de donner les éléments à l'intérieur de ces groupes de lignes de hauteurs dans les pourcentages. Par exemple, le menu groupe dispose de cinq lignes imbriquées laquelle vous pouvez donner à des hauteurs égales par la mise à chacun d'
height: 20%.Démo
CSS:
HTML:
Cool, si vous avez toujours des problèmes, faites le moi savoir ici ou vous pouvez toujours poser une autre question.
Bonjour @jme11 j'ai une question: Pourquoi "col-md-6" ne fonctionne pas avec votre code? :S.
merci, c'était vraiment très utile pour moi . J'ai une question , si vous réduisez la taille du navigateur verticalement les boîtes de hauteur sera plus petite , est-il possible d'utiliser min-height pour les boîtes de réduction d'un lot dans des appareils plus petits? toute suggestion?
OriginalL'auteur jme11
Cela peut être résolu avec le css, pas besoin de javascript.
Pour 100% de la hauteur que vous souhaitez définir la hiérarchie complète de conteneurs à 100% de la hauteur, à partir de votre coeur div, tout le chemin à la
<html>élément.Pour commencer, votre initiale css devrait commencer par ceci:
Avis de la virgule entre les éléments, c'est ainsi que tous ont la hauteur fixée à 100%. Au lieu de votre version qui n'établit de la .conteneur de fluide à 100% de la hauteur.
Il fonctionne, et c'est la façon de le faire. Montrez-moi le violon, où vous avez tenté afin que je puisse voir ce que vous avez fait de mal.
jsfiddle.net/z5dpu7od/1 Si je fais un copier-coller votre code dans jsfiddle il ne fonctionne pas: html, body, .conteneur de fluide{ height:100%; }
Lire ma réponse. Je ne dis pas de copier et de coller mon code, je suis en train de dire que c'est quelque chose pour commencer, vous avez besoin de plus de code pour le faire fonctionner, mais vous êtes prêt à faire un peu d'elle-même non?
Je suis un noob sur le CSS pour cette raison, j'ai demandé à stackoverflow. J'ai essayer avec mon code pour changer le blanc de l'espace par des virgules mais cela ne fonctionne pas. @jme11 me dire de faire de nouvelles CSS pour chaque ligne, pas à l'intérieur de mon .la frontière nombre de classes, et cela fonctionne.
OriginalL'auteur Andrei Dvoynos
Il est difficile de savoir ce que vous essayez d'atteindre, mais c'est ce que je ferais avec la conception. Une chose que j'utilise souvent est un petit script pour rendre sensible l'égalité des hauteurs de JQuery Correspondre à la Hauteur, c'est pour répondre des hauteurs égales.
SCRIPT: http://brm.io/jquery-match-height/
**DÉMO: http://jsbin.com/depoq/1/****
Puis il est appliqué comme ceci:
Ensuite, vous devez ajouter la classe
.inner(dans cet exemple) dans les bons endroits.OriginalL'auteur Christina