Twitter Bootstrap 3 zwei Spalten voller Höhe

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?

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)

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

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%;
}

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)

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>

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;
}

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;
}

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!

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;
    }

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;
}

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.

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.

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;
}

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.

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

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>

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>

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.

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

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.