Prise de Twitter Bootstrap Colonnes de la Même Hauteur
J'ai un ASP.NET MVC vue à la suite de Twitter Bootstrap layour:
<div class="container">
<div class="container-fluid header">
[Header content]
</div>
<div class="row-fluid">
<div class="span9">
<div class="container-fluid main-content">
[Main Content]
</div>
</div>
<div id="right-sidebar" class="span3">
[Right Sidebar Content]
</div>
</div>
</div>
Mon problème est que mon [Contenu] est beaucoup plus grand que ma [barre de Droite de Contenu]. Depuis mon [barre de Droite de Contenu] a une couleur de fond différente, je préfère qu'il a couru tout le chemin vers le bas pour mon pied de page (sur toute la hauteur de mon [Contenu].)
J'ai essayé de réglage height: 100%
dans la barre latérale, mais qui n'a eu aucun effet visible dans le navigateur Chrome. Quelqu'un peut-il voir comment atteindre cet objectif?
Égale hauteur des colonnes c'est un vieux problème dans le CSS. Il n'a rien à voir avec Bootstrap.
Vrai, mais peut-être Jonathan espérais que l'amorce a une accumulation de solution. au moins je l'ai fait 😉
Vrai, mais peut-être Jonathan espérais que l'amorce a une accumulation de solution. au moins je l'ai fait 😉
OriginalL'auteur Jonathan Wood | 2013-02-02
Vous devez vous connecter pour publier un commentaire.
J'ai changer un peu la structure et de l'élément de classes/id.
Et maintenant le CSS:
<div>
s mixtes quand j'ai posté. En fait, ils comme vous l'avez suggéré. Désolé à ce sujet. La vérification de la CSS...Cette solution se brise lorsque la hauteur de l'essentiel du contenu est plus grand que la hauteur de la barre latérale (au moins dans Chrome).
OriginalL'auteur cortex
La hauteur de 100% ne fonctionne pas parce que les environs de conteneurs a besoin d'une hauteur de propriété.
Vous pouvez définir une hauteur de comme 800px sur le récipient pour faire de votre hauteur de 100% de l'effet. Cependant, cela n'est pas égal au contenu principal, juste une façon de le faire ne regarde pas si différents.
Vous pouvez utiliser display: table; la table, comme des colonnes. http://jsbin.com/ojavub/1/edit
OriginalL'auteur Dustin