Macht Twitter Bootstrap Spalten die Gleiche Höhe

Habe ich eine ASP.NET MVC-Ansicht mit die folgenden 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>

Mein problem ist das mein [Hauptinhalt] sehr viel größer ist als meine [Sidebar Rechts Inhalt]. Da meine [Sidebar Rechts Inhalt] hat eine andere hintergrund-Farbe, ich würde es vorziehen, dass es rannte den ganzen Weg nach unten zu meinen footer (der vollständigen Höhe meiner [Hauptinhalt].)

Ich habe versucht height: 100% in der sidebar, aber das hatte keinen sichtbaren Effekt in Chrom. Kann jemand sehen, wie Sie zu erreichen ist?

  • Höhe-Spalten ist ein altes problem in CSS. Es hat nichts zu tun mit Bootstrap.
  • Stimmt, aber vielleicht Jonathan hatte gehofft, dass Stiefelriemen hat eine build-in Lösung. zumindest habe ich das getan 😉
InformationsquelleAutor Jonathan Wood | 2013-02-02
  1. 10

    Habe ich ändern sich ein wenig die Struktur und element-Klassen/- ids.

    <div class="container-fluid">
    <div class="row-fluid header">
        [Header content]
    </div>

    <div id="parent" class="row-fluid">
        <div class="span9 main-content">
                [Main Content]
        </div>
        <div id="right-sidebar" class="span3">
            [Right Sidebar Content]
        </div>
    </div>
</div>

    Und jetzt das CSS:

    #parent{
  position: relative
}

#right-sidebar{
  position: absolute;
  right: 0;
  height: 100%;
  background: blue;
}

.main-content{
  background: red;
}
    • D ' Oh! Hatte zu laufen, nach dem posting gestern. In der Tat, ich hatte <div>s Durcheinander, wenn ich gebucht. In der Tat, Sie werden wie du vorgeschlagen hast. Tut mir Leid, dass. Die überprüfung der CSS...
    • Diese Lösung wird unterbrochen, wenn die Höhe der wichtigsten Inhalte ist größer als die Höhe der sidebar (zumindest in Chrom).
    InformationsquelleAutor cortex
  2. 2

    Die Höhe 100% funktioniert nicht, da die umgebenden container muss eine height-Eigenschaft.

    Können Sie die Höhe festlegen, wie 800px auf den container, um Ihre Höhe zu 100% wirksam. Aber das macht es nicht gleich auf den wesentlichen Inhalt, nur ein Weg, um Sie zu sehen nicht so unterschiedlich.

    Nutzen Sie display: table; für die Tabelle, wie Spalten. http://jsbin.com/ojavub/1/edit

    #right-sidebar {
  background-color: red;
  display: table-cell;
}

.container {
  display: table;
}

.row-fluid {
  display: table-row;
}
    InformationsquelleAutor Dustin
Schreibe einen Kommentar