wake-up-neo.com

Twitter Bootstrap 3 zwei Spalten voller Höhe

Ich versuche zweispaltig full-height layout mit Twitter bootstrap 3. Es scheint, dass Twitter bootstrap 3 keine full-height-Layouts unterstützt . Was ich tun möchte:

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

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

  • Die Höhe von 100% für alle übergeordneten Elemente funktioniert nicht, da der Inhalt eine Zeile enthält.
  • position absolut scheint der falsche Weg zu sein
  • display: table und display:table-cell, 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 den standardmäßigen Twitter Bootstrap 3 Klassen zu machen?

htmlcsstwitter-bootstrap
229
uladzimir

Edit: In Bootstrap 4 erzeugen native Klassen can Spalten voller Höhe ( DEMO ), da sie ihr Gittersystem geändert haben. 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 integrieren, die css tables 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;
}

Der obige Code erreicht Spalten mit voller Höhe (aufgrund der von uns hinzugefügten benutzerdefinierten css-table-Eigenschaften) und mit ratio 1: 3 (Navigation: Content) für medium screen widths und oben - (aufgrund der Standardklassen von bootstrap: col-md-3 und col-md-9) 

NB: 

1) Um die systemeigenen Spaltenklassen von Bootstrap nicht zu stören, fügen Sie eine weitere Klasse wie no-float im Markup hinzu und setzen nur display:table-cell und float:none für diese Klasse (wie sie den Spaltenklassen selbst zugeordnet sind).

2) Wenn Sie den css-table-Code nur für einen bestimmten Haltepunkt verwenden möchten (z. B. mittlere Bildschirmbreiten und darüber), möchten wir für mobile Bildschirme jedoch das übliche Bootstrap-Verhalten verwenden, als das wir einpacken können benutzerdefiniertes CSS in einer Medienabfrage, sagen Sie:

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

Codepen Demo

Bei kleineren Bildschirmen verhalten sich die Spalten jetzt wie Standard-Bootstrap-Spalten (jeweils mit voller 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 dies nicht der Fall ist, in dem sie verwendet werden sollen.

Codepen Demo

200
Danield

Mit dem padding-bottom: 100%; margin-bottom: -100%;-Trick können Sie erreichen, was Sie wollen, können Sie in this Geige sehen.

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

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

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

Reine CSS-Lösung

Arbeiten Fiddle

Nur mit CSS2.1. Mit allen Browsern (IE8 +), arbeiten, ohne Höhe oder Breite anzugeben.

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

Absolut ansprechend, einfach und übersichtlich 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 div nimmt eine Körpergröße von 100% ein, und er ist in 2 Abschnitte unterteilt. Der Kopfabschnitt wird bis zur erforderlichen Höhe gespannt, und die HeightTaker nimmt den Rest ..__ Wie wird es erreicht? Schweben Sie ein leeres Element neben dem Container mit 100% Höhe (mit :before) und geben Sie der Variablen HeightTaker am Ende ein leeres Element mit der clear-Regel (mit :after). Dieses Element kann nicht in derselben Zeile mit dem schwebenden Element sein, also wird es bis zum Ende gedrückt. Das ist genau die 100% des Dokuments.

Damit machen wir die HeightTaker Spannweite des Restes der Containerhöhe, ohne eine bestimmte Höhe/Marge anzugeben.

innerhalb dieser HeightTaker erstellen wir mit einer geringfügigen Änderung ein normales Float-Layout (um die spaltenartige Anzeige zu erzielen). Wir haben ein Wrapper-Element, das für die Funktion der 100%-Höhe erforderlich ist.

Aktualisieren

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

38
avrahamcool

Ich habe über eine geringfügige Änderung nachgedacht, die das standardmäßige Bootstrap-Verhalten nicht verändert.

.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>
24
AndreDurao

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

  1. Verwenden der Eigenschaften der CSS-Anzeigetabelle/Tabellenzelle oder Verwenden von tatsächlichen Tabellen.
  2. Verwenden eines absolut positionierten Elements im Wrapper.
  3. Verwendung der Anzeigeeigenschaft von Flexbox, aber bis heute noch teilweise Unterstützung
  4. Simulieren Sie volle Säulenhöhen mit der Faux-Säulentechnik .
  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;
}
8
Oriol

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

Sie fügen einfach eine große Auffüllung und einen gleich großen negativen Rand zu den Navigations- und Inhaltsspalten hinzu, und wickeln dann ihre Zeile in eine Klasse mit ausgeblendetem Überlauf ein.
Liveübertragung
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!

6
David Taiaroa

Die Lösung kann auf zwei Arten erreicht werden

  1. Anzeige verwenden: Tabelle und Anzeige: Tabellenzelle
  2. Auffüllen und negativer Rand.

Die Klassen, die zum Erhalten der obigen Lösung verwendet werden, sind in Bootstrap 3 nicht verfügbar. Anzeige: Tabelle und Anzeige: Tabellenzellen sind angegeben, jedoch nur bei Verwendung von Tabellen in HTML . Negative Margin- und Padding-Klassen nicht Dort.

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>

die 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>

die 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;
    }
5
user2594152

Ok, ich habe dasselbe mit Bootstrap 3.0 erreicht

Beispiel mit dem neuesten Bootstrap

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

Das 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>

Der 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;
}
4
VAShhh

Es scheint also, dass es am besten ist, wenn Sie padding-bottom von einer negativen margin-bottom-Strategie kontern.

Ich habe zwei Beispiele gemacht. Eine mit <header>inside.container und eine andere damit outside.

Beide Versionen sollten ordnungsgemäß funktionieren. Beachten Sie die Verwendung der folgenden @media-Abfrage, um die zusätzliche Auffüllung auf kleineren Bildschirmen zu entfernen ...

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

Abgesehen davon sollten diese Beispiele Ihr Problem beheben.

3
Giovanni Silveira

es ist viel einfacher, dies zu tun, wenn Sie nur die Farbe festlegen.

Fügen Sie dieses entweder als erstes oder als letztes in Ihren Körper-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, fixieren sie hinter der Seite und dehnen sie auf volle Höhe aus. Indem Sie die vorhandenen Bootstrap-Klassen verwenden, erhalten Sie die richtige Breite, und es bleibt ansprechbar.

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

2
Simon Stevens

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

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

Das Prinzip lautet:

  • füge den "tablefull" auf einem DIV hinzu 
  • das implizite DIV erstellt dann Zeilen 
  • und dann wird DIV unter den Zeilen Zellen sein 
  • Sie können die Klasse "tableheader" für Überschriften oder ähnliches verwenden

Das 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;
}
2
Guillaume F.

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 

1
Amol Shiledar

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.

1
Krishna Rani Sahoo

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;
}
0
Nikolay Yenbakhtov