Twitter Bootstrap 3 zwei Spalten voller Höhe


247

Ich versuche , zweispaltige zu machen mit voller Bauhöhe Layout mit Twitter Bootstrap 3. Es scheint , dass Twitter Bootstrap - 3 nicht die volle Höhe Layouts unterstützen. Was ich machen will; was ich vorhabe zu tun:

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

Wenn der Inhalt wächst, sollte auch das Navi wachsen.

  • Die Höhe 100% für jedes Elternteil funktioniert nicht, da der Inhalt nur eine Zeile enthält.
  • Position absolut scheint der falsche Weg zu sein
  • display: tableund display:table-celllösen Sie das Problem, aber es ist nicht elegant

html:

    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>

Gibt es eine Möglichkeit, es mit Standard- Twitter-Bootstrap-3- Klassen zu schaffen?


Muss dieses Navigations- und Inhaltselement die verbleibende Höhe des Ansichtsfensters (Bildschirm) abdecken?
Shekhar K. Sharma

Ja. Nur zum Löschen: Header + Inhalt = 100% des Ansichtsfensters, wenn Höhe des Inhalts <= Höhe des Ansichtsfensters minus Höhe des Headers. Entschuldigung für schlechtes Englisch
Uladzimir

Ich verstehe nicht, könnten Sie nicht einfach den Hintergrund für die .row angeben und dem col-md-9 erlauben, den Teil zu vertuschen oder umgekehrt? Wie wäre es, wenn Sie der Reihe eine Höhe von 100% geben und der Navigationshöhe 100% geben und dem col-md-9 nur erlauben, dynamisch zu wachsen?
Chris Peterson

Antworten:


217

Edit: In Bootstrap 4 , nativen Klassen können in voller Höhe Spalten (produzieren DEMO ) , weil sie verändert ihre Grid - System zu Flexbox. (Lesen Sie weiter für Bootstrap 3)


Die nativen Bootstrap 3.0-Klassen unterstützen das von Ihnen beschriebene Layout nicht. Wir können jedoch einige benutzerdefinierte CSS- Programme integrieren, die CSS- Tabellen verwenden , um dies zu erreichen.

Bootply-Demo / Codepen

Markup:

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

(Relevantes) CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

Mit dem obigen Code werden Spalten mit voller Höhe (aufgrund der von uns hinzugefügten benutzerdefinierten CSS-Tabelleneigenschaften) und mit einem Verhältnis von 1: 3 (Navigation: Inhalt) für mittlere Bildschirmbreiten und höher (aufgrund der Standardklassen von Bootstrap: col-md) erreicht -3 und col-md-9)

NB:

1) Um die nativen Spaltenklassen von Bootstrap nicht durcheinander zu bringen, fügen wir eine weitere Klasse wie no-floatim Markup hinzu und setzen display:table-cellund float:noneauf diese Klasse (wie es für die Spaltenklassen selbst gilt).

2) Wenn wir den CSS-Tabellencode nur für einen bestimmten Haltepunkt (z. B. mittlere Bildschirmbreiten und höher) verwenden möchten, aber für mobile Bildschirme standardmäßig das übliche Bootstrap-Verhalten verwenden möchten, können wir unser benutzerdefiniertes CSS in a umschließen Medienabfrage, sagen wir:

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

Codepen-Demo

Bei kleineren Bildschirmen verhalten sich die Spalten nun wie Standard-Bootstrap-Spalten (jede erhält die volle Breite).

3) Wenn das Verhältnis 1: 3 für alle Bildschirmbreiten erforderlich ist, ist es wahrscheinlich besser, die col-md- * -Klassen von bootstrap aus dem Markup zu entfernen, da sie nicht so verwendet werden sollen.

Codepen-Demo


Hm. Es ist nicht wirklich das, wonach ich suche. Gibt es möglicherweise eine Lösung mit nativen Bootstrap 3-Klassen? Danke trotzdem!
Uladzimir

7
Funktioniert für mich nach dem Hinzufügen von float: none; zu Spalten, aber auf js ist es nicht notwendig. Warum? Upd: @media - Ursache
uladzimir

2
@Zubzob - Ich habe meine Antwort aktualisiert und bootply. Durch Hinzufügen einer zusätzlichen Klasse zu den nativen Klassen col-md-3 und col-md-9 können wir sicherstellen, dass dadurch kein anderer Code durcheinander gebracht wird.
Danield

1
Die Antwort wäre also: "Nein, Sie können dies nicht mit den sofort einsatzbereiten Bootstrap-Klassen tun"?
eran otzap

1
@ Meglio bitte lesen Sie meine bearbeitete Antwort - danke für den Hinweis
Danield

68

Sie können mit dem padding-bottom: 100%; margin-bottom: -100%;Trick erreichen, was Sie wollen , haben Sie in dieser Geige zu sehen.

Ich ändere Ihren HTML-Code ein wenig, aber Sie können das gleiche Ergebnis mit Ihrem eigenen HTML-Code mit dem folgenden Code erzielen

.col-md-9 {
    overflow: hidden;
}

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

OK. Ich werde die Frage aktualisieren. Ich habe eine dynamische Seite (col-md-9 kann wachsen), daher sollte Ihre Variante nicht funktionieren, aber ich werde sie testen. Danke
uladzimir

Nicht etwas, was ich in Frage meine. Ich möchte Spalten mit voller Höhe, falls col-md-9 eine Zeile Texthöhe hat, sollte die gleiche Höhe 100% betragen - Höhe der Kopfzeile oder einfach 100%. Ich habe diesen Trick nur mit Werten wie 10000px, -10000px ausprobiert. Aber danke für deine Antwort.
Uladzimir

Meine Spalten waren hoch, daher musste ich den Polsterboden ändern: 10000%; Rand-unten: -10000%; und es hat den Trick gemacht. Ansonsten hat 100% wohl mit der Seitenhöhe zu tun
Toolkit

2
Für andere, die diese Lösung ausprobieren, muss overflow: hidden auf die übergeordnete Zeile und nicht auf die Spalte außerhalb der Seitenleiste angewendet werden, um browserübergreifend arbeiten zu können. Es ist richtig in der Geige, aber nicht in der obigen Erklärung.
Tim

38

Reine CSS-Lösung

Geige arbeiten

Arbeiten Sie nur mit CSS2.1 mit allen Browsern (IE8 +), ohne Höhe oder Breite anzugeben.

Das heißt, wenn Ihr Header plötzlich länger wird oder Ihre linke Navigation vergrößert werden muss, müssen Sie nichts in Ihrem CSS korrigieren.

Völlig reaktionsschnell, einfach und klar und sehr einfach zu verwalten.

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftNavigation">
            </div>
            <div class="Content">
            </div>
        </div>
    </div>
</div>

Erläuterung: Der Container divnimmt eine Körpergröße von 100% ein und ist in zwei Abschnitte unterteilt. Der Header-Bereich wird auf die erforderliche Höhe gespannt, und HeightTakerder Rest wird übernommen. Wie wird es erreicht? indem Sie ein leeres Element mit 100% Höhe neben den Container schweben lassen (using :before) und HeightTakeram Ende ein leeres Element mit der Clear-Regel geben (using :after). Dieses Element kann nicht in der gleichen Linie wie das schwebende Element sein, also wird er bis zum Ende gedrückt. Das ist genau die 100% des Dokuments.

Damit machen wir die HeightTakerSpannweite zum Rest der Containerhöhe, ohne eine bestimmte Höhe / einen bestimmten Rand anzugeben.

Darin HeightTakererstellen wir ein normales schwebendes Layout (um die spaltenartige Anzeige zu erreichen) mit einer geringfügigen Änderung. Wir haben ein WrapperElement, das benötigt wird, damit die 100%Höhe funktioniert.

Aktualisieren

Hier ist die Demo mit Bootstrap-Klassen. (Ich habe gerade ein Div zu Ihrem Layout hinzugefügt)


Ja, es ist die schönste Lösung. Könnten Sie es für Bootstrap-Klassen machen?
Uladzimir

Und bitte erklären Sie, wie es funktioniert. Derzeit ist es am besten geeignet, um zu genehmigen
uladzimir

Ich kenne Bootstrap nicht. Entschuldigung. aber es ist so einfach zu bedienen .. Sie können es selbst tun. Ich werde eine Erklärung hinzufügen, wie es funktioniert.
Avrahamcool

@baxxabit Ich habe eine Erklärung hinzugefügt. Sag mir, wenn du mehr Infos brauchst.
Avrahamcool

1
Wenn Sie die Größe des Fensters ändern, passt es nicht richtig auf den Bildschirm.
Sadegh

25

Ich dachte über eine subtile Änderung nach, die das Standard-Bootstrap-Verhalten nicht ändert. Und ich kann es nur verwenden, wenn ich es brauchte:

.table-container {
  display: table;
}

.table-container .table-row {
  height: 100%;
  display: table-row;
}

.table-container .table-row .table-col {
  display: table-cell;
  float: none;
  vertical-align: top;
}

so kann ich es so verwenden:

<div class="container table-container">
  <div class="row table-row">
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
  </div>
</div>

Arbeitete wunderbar für mich (mit Bootstrap 3)
Gary Richter

Ich konnte eine der oben genannten Lösungen nicht zum Laufen bringen. Die vertikale Ausrichtung war der Schlüssel für mich.
Nathan

9

Meines Wissens können Sie bis zu 5 Methoden verwenden, um dies zu erreichen:

  1. Verwenden der Eigenschaften der CSS-Anzeigetabelle / Tabellenzelle oder Verwenden der tatsächlichen Tabellen.
  2. Verwenden eines absolut positionierten Elements im Wrapper.
  3. Die Flexbox-Anzeigeeigenschaft wird verwendet, wird jedoch bis heute teilweise unterstützt
  4. Simulieren Sie volle Säulenhöhen mithilfe der Faux-Column-Technik .
  5. Verwenden der Polster- / Randtechnik. Siehe Beispiel .

Bootstrap: Ich habe nicht viel Erfahrung damit, aber ich glaube nicht, dass sie dafür Stile bieten.

.row
{
    overflow: hidden;
    height: 100%;
}
.row .col-md-3,
.row .col-md-9 
{
    padding: 30px 3.15% 99999px; 
    float: left;
    margin-bottom: -99999px;
}
.row .col-md-3 p,
.row .col-md-9 p 
{
    margin-bottom: 30px;
}
.col-md-3
{
    background: pink;
    left:0;
    width:25%
}
.col-md-9
{
    width: 75%;
    background: yellow;
}

Vielen Dank, @Oriol. Du bist toll. Einige Punkte: 1), 2) ja, aber nicht was ich will 3) Es ist eine Lösung, aber nur für moderne ff und Chrom. Safari unterstützt eine alte Version von Flexbox 4) nicht die Bootstrap-Klassen 5) Rechte Spalten können wachsen. Überlauf: versteckt wird eine wichtige Linie beschneiden. Es ist nicht cool :) Ich werde versuchen, Ihren Code
uladzimir

7

Moderne und sehr einfache Lösung:

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-9"></div>
  </div>
</div>

CSS:

.row{
    display: flex;
}

6

Eine reine CSS-Lösung ist einfach genug und funktioniert wie ein Charm Cross Browser.

Sie fügen den Navigations- und Inhaltsspalten einfach einen großen Abstand und einen ebenso großen negativen Rand hinzu und wickeln dann ihre Zeile in eine Klasse mit ausgeblendetem Überlauf ein.
Live-Ansicht Ansicht
bearbeiten

HTML

<div class="container">

  <div class="row">
    <div class="col-xs-12 header"><h1>Header</h1></div>
  </div>

  <div class="row col-wrap">

    <div class="col-md-3 col">
      <h1>Nav</h1>
    </div>

    <div class="col-md-9 col">
      <h1>Content</h1>
    </div>

  </div>
</div>

CSS

.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

.col-wrap{
overflow: hidden; 
}  

Viel Glück!


1
Entschuldigung, aber das sieht nach einem schrecklichen Hack aus, der Ihnen nicht die Möglichkeit gibt, ein Element am unteren Rand des untergeordneten Containers absolut zu positionieren.
Mattijs

Keine gute Lösung, wenn Sie einen Radius am unteren Rand oder eine Art visuelles Element im div-Hintergrund haben.
RandomBoy

5

Die Lösung kann auf zwei Arten erreicht werden

  1. Verwenden von display: table und display: table-cell
  2. Mit Polsterung und negativem Rand.

Die Klassen, die zum Abrufen der obigen Lösung verwendet werden, werden in Bootstrap 3 nicht bereitgestellt. Display: table und display: table-cell werden angegeben, sondern nur, wenn Tabellen in HTML verwendet werden. Negative Margin- und Padding-Klassen gibt es ebenfalls nicht.

Daher müssen wir benutzerdefinierte CSS verwenden, um dies zu erreichen.

Das Folgende ist die erste Lösung

HTML Quelltext:

<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row tablewrapper">
    <div class="col-md-12 tablerowwrapper">
        <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content">
            <div class="col-md-12">
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div>
    </div>
  </div>

</div>

das entsprechende css:

html,body,.container{
        height:100%;
    }
    .tablewrapper{
        display:table;
        height:100%;
    }
    .tablerowwrapper{
        display:table-row;
    }
    .sidebar,.content{
        display:table-cell;
        height:100%;
        border: 1px solid black;
        float:none;
    }
    .pad_top15{
        padding-top:15px;
    }

Das Folgende ist die zweite Lösung

HTML Quelltext:

 <div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row ovfhidden bord_bot height100p">
    <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content pad_top15">
            <div class="col-md-12">

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div> 
  </div>

</div>

das entsprechende css:

html,body,.container{
        height:100%;
    }
    .sidebar,.content{
        /*display:table-cell;
        height:100%;*/
        border: 1px solid black;
        padding-bottom:8000px;
        margin-bottom:-8000px;
    }
    .ovfhidden{
        overflow:hidden;
    }
    .pad_top15{
        padding-top:15px;
    }
    .bord_bot{
        border-bottom: 1px solid black;
    }

Spalten haben nicht 100% Höhe des Ansichtsfensters
uladzimir

Entschuldigung, ich habe einen grundlegenden Stil vergessen. HTML, Body, Container {Höhe: 100%;}
Füge

Die rechte Spalte kann wachsen, so dass ein Überlauf auftritt: Das Ausblenden der Zeile kann einige Inhalte zuschneiden, wenn mehr als die Höhe des Ansichtsfensters benötigt wird.
Uladzimir

Überlauf entfernen: Aus der Reihe ausgeblendet. Es gibt versteckte Inhalte jsfiddle.net/gMPXG/7/embedded/result
uladzimir

Was ist das Problem dabei?
user2594152

4

Ok, ich habe das gleiche mit Bootstrap 3.0 erreicht

Beispiel mit dem neuesten Bootstrap

http://jsfiddle.net/HDNQS/1/

Der HTML:

<div class="header">
    whatever
</div>
<div class="container-fluid wrapper">
    <div class="row">
        <div class="col-md-3 navigation"></div>
        <div class="col-md-9 content"></div>
    </div>
</div>

Das SCSS:

html, body, .wrapper {
    padding: 0;
    margin: 0;
    height: 100%;
}

$headerHeight: 43px;

.navigation, .content {
    display: table-cell;
    float: none;
    vertical-align: top;
}

.wrapper {
    display: table;
    width: 100%;
    margin-top: -$headerHeight;
    padding-top: $headerHeight;
}

.header {
    height: $headerHeight;
}

.row {
    height: 100%;
    margin: 0;
    display: table-row;
    &:before, &:after {
        content: none;
    }
}

.navigation {
    background: #4a4d4e;
    padding-left: 0;
    padding-right: 0;
}

Ja, aber es ist das gleiche wie die genehmigte Antwort. Vielen Dank
uladzimir

Ja, es ist meistens das gleiche, aber Sie müssen einige kleine "Optimierungen" hinzufügen (siehe content:noneund andere kleine Dinge). Ich wollte einen 'Drop-In'-Ersatz veröffentlichen, den ich auch kopypastieren kann
VAShhh

+1 für das Hinzufügen von "vertikal ausrichten: oben". Meine linke Spalte klebte am Ende der Seite, bis ich diese hinzufügte.
NoizWaves

3

Es scheint also, dass Ihre beste Option darin besteht, die Strategie der padding-bottomnegativen margin-bottomStrategie zu kontern.

Ich habe zwei Beispiele gemacht. Einer mit <header> innen .container und einer mit außen .

Beide Versionen sollten ordnungsgemäß funktionieren. Beachten Sie die Verwendung der folgenden @mediaAbfrage, damit die zusätzliche Auffüllung auf kleineren Bildschirmen entfernt wird ...

@media screen and (max-width:991px) {
    .content { padding-top:0; }
}

Ansonsten sollten diese Beispiele Ihr Problem beheben.


Guter Anruf beim Entfernen der zusätzlichen Polsterung auf kleineren Bildschirmen gio
David Mann

Daumen hoch für die Geige mit dem äußeren Kopfball, dies war der einzige, der für meinen Fall funktionierte.
Tinus Tate

2

Es gibt eine viel einfachere Möglichkeit, dies zu tun, wenn Sie nur die Farbe festlegen.

Fügen Sie dies entweder zuerst oder zuletzt in Ihr Body-Tag ein

<div id="nfc" class="col col-md-2"></div>

und das in deinem css

#nfc{
  background: red;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: -99;
}

Sie erstellen lediglich eine Form, stecken sie hinter die Seite und strecken sie auf die volle Höhe. Wenn Sie die vorhandenen Bootstrap-Klassen verwenden, erhalten Sie die richtige Breite und es bleibt reaktionsschnell.

Es gibt einige Einschränkungen bei dieser Methode, aber wenn es um die Stammstruktur der Seite geht, ist es die beste Antwort.


Warum hast du position: absolutedann position: fixed?
ADTC

habe nicht den nebligsten, Tippfehler :)
Simon Stevens

Schöne Lösung. Ich kann es jedoch nur dazu bringen, mit richtig auszurichten .container-fluid. Ich würde gerne verwenden .container. Ideen?
Jibran

.containeroder .container-fluidhaben überhaupt keine Relevanz dafür. Das .col.col-md-2legt die Breite mit Bootstrap fest. Mein CSS oben zwingt das Div auf volle Höhe mit ausreichend negativem Z-Index, um sicherzustellen, dass es hinter allem steht. Wie oben erwähnt, sollte es das allererste oder das allerletzte Element in Ihrem <body>Tag sein
Simon Stevens

2

Ich habe ein einfaches CSS geschrieben, das mit Bootstrap kompatibel ist, um Tabellen mit voller Breite und Höhe zu erstellen:

Geige: https://jsfiddle.net/uasbfc5e/4/

Das Prinzip ist:

  • Fügen Sie die "tablefull" auf einem Haupt-DIV hinzu
  • dann erzeugt der DIV unten implizit Zeilen
  • und dann werden DIV unter den Zeilen Zellen sein
  • Sie können die Klasse "tableheader" für Header oder ähnliches verwenden

Der HTML:

<div class="tablefull">
    <div class="tableheader">
        <div class="col-xs-4">Header A</div>
        <div class="col-xs-4">B</div>
        <div class="col-xs-4">C</div>
    </div>
    <div>
        <div class="col-xs-6">Content 50% width auto height</div>
        <div class="col-xs-6">Hello World</div>
    </div>
    <div>
        <div class="col-xs-9">Content 70% width auto height</div>
        <div class="col-xs-3">Merry Halloween</div>
    </div>
</div>

Das CSS:

div.tablefull {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

div.tablefull>div.tableheader, div.tablefull>div.tableheader>div{
    height: 0%;
}

div.tablefull>div {
    display: table-row;
}

div.tablefull>div>div {
    display: table-cell;
    height: 100%;
    padding: 0;
}

Hüten Sie sich vor CSS-Minifahrern, die sich manchmal ändern 0%;, 0;was völlig anders ist. In diesem Fall können Sie 1%;stattdessen verwenden.
Guillaume F.

1

Versuchen

<div class="container">
    <div class="row">
        <div class="col-md-12">header section</div>

    </div>
     <div class="row fill">
        <div class="col-md-4">Navigation</div>
        <div class="col-md-8">Content</div>

    </div>
</div>

CSS für die .fill-Klasse ist unten

 .fill{
    width:100%;
    height:100%;
    min-height:100%;
    padding:10px;
    color:#efefef;
    background: blue;
}
.col-md-12
{
    background: red;

}

.col-md-4
{
    background: yellow;
    height:100%;
    min-height:100%;

}
.col-md-8
{
    background: green;
    height:100%;
    min-height:100%;

}

Als Referenz schauen Sie einfach in die Geige.


Vielen Dank für Ihre Antwort, aber ich benutze Twitter Bootstrap 3, nicht 2. Bitte lesen Sie getbootstrap.com/getting-started/#migration
uladzimir

Bootstrap 3, es wird keine Spanne verwendet, geändert in Spalte.
Kooki3

OK. Die Höhe der Spalten entspricht der Höhe des Inhalts in den Spalten, aber ich kann nur eine Zeile haben.
Uladzimir

Danke @ Kooki3. Wechseln Sie einfach spanzu col-md-und sehen Sie, was passiert<div class="container"> <div class="row"> <div class="col-md-12">header section</div> </div> <div class="row"> <div class="col-md-4">Navigation</div> <div class="col-md-8">Content</div> </div> </div>
Krishna Rani Sahoo

funktioniert nicht Lesen Sie meinen Kommentar? jsfiddle.net/YQUQd/1/embedded/result
uladzimir

1

Versuche dies

 <div class="container">
     <!-- Header-->         
  </div>
</div>
 <div class="row-fluid">
     <div class="span3 well">
         <ul class="nav nav-list">
             <li class="nav-header">Our Services</li>
                <!-- Navigation  -->
             <li class="active"><a href="#">Overview</a></li>
             <li><a href="#">Android Applications</a></li>
             <li class="divider"></li>
         </ul>
     </div>
     <div class="span7 offset1">
      <!-- Content -->         
     </div>
 </div>

Besuchen Sie http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/

Danke an Syed


2
Danke, könnten Sie Ihr Beispiel für Bootstrap 3.0 ändern?
Uladzimir

-1

Wenn nach der Zeile kein Inhalt mehr angezeigt wird (die gesamte Bildschirmhöhe wird verwendet), funktioniert der Trick mit der Verwendung von position: fixed; height: 100%for- .col:beforeElement möglicherweise gut:

header {
  background: green;
  height: 50px;
}
.col-xs-3 {
  background: pink;
}
.col-xs-3:before {
  background: pink;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}
.col-xs-9 {
  background: yellow;
}
.col-xs-9:before {
  background: yellow;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<header>Header</header>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">Navigation</div>
        <div class="col-xs-9">Content</div>
    </div>
</div>


-2

Dies wurde hier nicht mit Ausgleich erwähnt.

Sie können absolut verwenden, um die linke Seitenleiste zu positionieren.

CSS

.sidebar-fixed{
  width: 16.66666667%;
  height: 100%;
}

HTML

<div class="row">
  <div class="sidebar-fixed">
    Side Bar
  </div>
  <div class="col-md-10 col-md-offset-2">
    CONTENT
  </div>
</div>

-3

Versuche dies

<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">Nav     Content</div>
<div class="col-xs-12 col-sm-9">Content goes here</div>
</div>

Dies verwendet Bootstrap 3, sodass kein zusätzliches CSS usw. erforderlich ist.


Bitte geben Sie Geige
Uladzimir

Hier ist ein Beispiel, das so etwas von der Bootstrap-Website zeigt: getbootstrap.com/examples/offcanvas
Dan Esparza

-3

Hast du das Afix des Bootstraps im Abschnitt von JAvascript gesehen?

Ich denke, es wäre die beste und einfachste Lösung, Alter.

Schauen Sie dort nach: http://getbootstrap.com/javascript/#affix


Können Sie bitte ein Beispiel teilen, wie kann ich mit afix zwei Spalten erstellen?
Uladzimir

Übrigens .... hast du es mit der Min-Höhe versucht ??? Vielleicht ist es nützlich, oder? @Baxxabit
Despertaweb

-3

Nach dem Experimentieren mit dem hier bereitgestellten Code: Bootstrap Tutorial

Hier ist eine weitere Alternative mit dem neuesten Bootstrap v3.0.2:

Markup:

<div id="headcontainer" class="container">
           <p>Your Header</p>    
</div>
<div id="maincontainer" class="container">
      <div class="row">
         <div class="col-xs-4"> 
            <p>Your Navigation</p> 
         </div>
         <div class="col-xs-8"> 
            <p>Your Content</p> 
         </div>
      </div>
</div>

Zusätzliches CSS:

#maincontainer, #headcontainer {
width: 100%;
}

#headcontainer {
background-color:#CCCC99; 
height: 150px
}

#maincontainer .row .col-xs-4{
background-color:gray; 
height:1000px
}

#maincontainer .row .col-xs-8{
background-color:green;
height: 1000px
}

Beispiel JSFiddle

Hoffe das hilft allen Interessierten.


jsfiddle.net/zHRZr/7 ursprüngliche Frage zur dynamischen Höhe, aber trotzdem danke
uladzimir
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.