Bootstrap Twitter 3 due colonne a tutta altezza

Sto cercando di creare un layout a due colonne a tutta altezza con Twitter Bootstrap 3. Sembra che Twitter Bootstrap 3 non supporti layout a tutta altezza. Cosa voglio fare:

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

Se il contenuto cresce, anche il nav dovrebbe crescere.

• L'altezza del 100% per ogni genitore non funziona perché esiste un caso in cui il contenuto è una riga.
• la posizione assoluta sembra essere sbagliata
• display: tablee display:table-cellrisolvi il problema, ma non è elegante

html:

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

C'è un modo per farlo con le classi predefinite di Twitter Bootstrap 3 ?

Modifica: In Bootstrap 4 , le classi native possono produrre colonne a tutta altezza ( DEMO ) perché hanno cambiato il loro sistema a griglia in flexbox. (Continua a leggere per 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>

(Rilevante) 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;
}

Il codice sopra raggiungerà colonne a tutta altezza (a causa delle proprietà personalizzate della tabella css che abbiamo aggiunto) e con rapporto 1: 3 (Navigazione: contenuto) per larghezze dello schermo medie e superiori - (a causa delle classi predefinite di bootstrap: col-md -3 e col-md-9)

NB:

1) Al fine di non confondere le classi di colonne native di bootstrap aggiungiamo un'altra classe come no-floatnel markup e solo impostata display:table-celle float:nonesu questa classe (come apposta alle classi di colonne stesse).

2) Se vogliamo usare il codice css-table solo per un punto di interruzione specifico (ad esempio larghezze dello schermo medie e superiori), ma per gli schermi mobili vogliamo tornare al normale comportamento bootstrap di quanto possiamo avvolgere il nostro CSS personalizzato all'interno di un media query, dire:

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

Demo Codepen

Ora, per schermi più piccoli, le colonne si comporteranno come colonne bootstrap predefinite (ognuna con larghezza completa).

3) Se il rapporto 1: 3 è necessario per tutte le larghezze dello schermo, allora è probabilmente meglio rimuovere le classi col-md- * del bootstrap dal markup perché non è così che devono essere utilizzate.

Demo Codepen

Puoi ottenere ciò che vuoi con il padding-bottom: 100%; margin-bottom: -100%;trucco, come puoi vedere in questo violino.

Cambio un po 'il tuo HTML, ma puoi ottenere lo stesso risultato con il tuo HTML con il seguente codice

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

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

Soluzione CSS pura

Fiddle di lavoro

Utilizzando solo CSS2.1, lavora con tutti i browser (IE8 +), senza specificare altezza o larghezza.

Ciò significa che se la tua intestazione aumenta improvvisamente o la tua navigazione a sinistra deve allargarsi, non devi correggere nulla nel tuo CSS.

Totalmente reattivo, semplice e chiaro e molto facile da gestire.

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

Spiegazione: Il contenitore divprende il 100% di altezza del corpo ed è diviso in 2 sezioni. La sezione dell'intestazione si estenderà all'altezza necessaria e HeightTakeril resto prenderà il resto. Come viene raggiunto? facendo galleggiare un elemento vuoto lungo il contenitore con un'altezza del 100% (usando :before), e dando HeightTakerun elemento vuoto alla fine con la regola chiara (usando :after). quell'elemento non può essere nella stessa linea con l'elemento mobile, quindi è stato spinto fino alla fine. che è esattamente il 100% del documento.

Con ciò rendiamo lo HeightTakerspan il resto dell'altezza del contenitore, senza indicare alcuna altezza / margine specifici.

all'interno di questo HeightTakercostruiamo un normale layout fluttuante (per ottenere la colonna come display) con una piccola modifica .. abbiamo un Wrapperelemento, che è necessario affinché l' 100%altezza funzioni.

Aggiornare

Ecco la demo con le classi Bootstrap. (Ho appena aggiunto un div al tuo layout)

Ho pensato a un cambiamento sottile, che non cambia il comportamento predefinito del bootstrap. E posso usarlo solo quando ne avevo bisogno:

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

così posso usarlo in questo modo:

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

Per quanto ne so, puoi utilizzare fino a 5 metodi per ottenere questo risultato:

1. Utilizzo delle proprietà della tabella / cella di visualizzazione CSS o utilizzo delle tabelle effettive.
2. Utilizzando un elemento posizionato in modo assoluto all'interno dell'involucro.
3. Utilizzando la proprietà di visualizzazione Flexbox ma, ad oggi, ha ancora un supporto parziale
4. Simula altezze di colonna complete utilizzando la tecnica della colonna falsa .
5. Usando la tecnica padding / margin. Vedere l'esempio .

Bootstrap: non ho molta esperienza con esso, ma non credo che forniscano stili per questo.

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

Soluzione moderna e molto semplice:

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

Una soluzione CSS pura è abbastanza semplice e funziona come un browser incrociato.

È sufficiente aggiungere una grande imbottitura e un margine negativo ugualmente grande alle colonne nav e content, quindi avvolgere la riga in una classe con overflow nascosto.
Vista live
Modifica vista

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

In bocca al lupo!

La soluzione può essere raggiunta in due modi

1. Usando display: table e display: table-cell
2. Utilizzo di imbottitura e margine negativo.

Le classi utilizzate per ottenere la soluzione di cui sopra non sono fornite in bootstrap 3. display: table e display: table-cell sono dati ma solo quando si usano le tabelle in HTML. non ci sono anche margini negativi e classi di riempimento.

Quindi dobbiamo usare css personalizzati per raggiungere questo obiettivo.

Di seguito è la prima soluzione

Codice HTML:

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

il css corrispondente:

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

Di seguito è la seconda soluzione

Codice HTML:

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

il css corrispondente:

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, ho ottenuto la stessa cosa usando Bootstrap 3.0

Esempio con l'ultimo bootstrap

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

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>

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

Quindi sembra che la tua migliore opzione stia andando contro il padding-bottomcontrastato dalla margin-bottomstrategia negativa .

Ho fatto due esempi. Uno con <header> dentro .container e un altro con fuori .

Entrambe le versioni dovrebbero funzionare correttamente. Nota l'uso della seguente @mediaquery in modo che rimuova il riempimento extra su schermi più piccoli ...

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

A parte questo, quegli esempi dovrebbero risolvere il tuo problema.

c'è un modo molto più semplice di farlo se tutto ciò che ti preoccupa è di stabilire il colore.

Metti questo o il primo o l'ultimo nel tag body

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

e questo nel tuo css

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

stai solo creando una forma, bloccandola dietro la pagina e allungandola a tutta altezza. Usando le classi bootstrap esistenti, otterrai la larghezza giusta e rimarrà reattivo.

Ci sono alcune limitazioni con questo metodo ofc, ma se è per la struttura radice della pagina, è la risposta migliore.

Ho scritto un semplice CSS compatibile con Bootstrap per creare tabelle di larghezza e altezza complete:

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

Il principio è:

• aggiungi il "tablefull" su un DIV principale
• quindi implicitamente, il DIV sottostante creerà le righe
• e poi DIV sotto le righe saranno celle
• È possibile utilizzare la classe "tableheader" per intestazioni o simili

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>

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

provare

<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 per la classe .fill è sotto

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

}

Per il tuo riferimento basta guardare nel violino.

prova questo

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

Visitare http://www.sitepoint.com/building-responsive-we using- bootstrap/

Grazie a Syed

Se non ci sono contenuti dopo la riga (viene presa l'intera altezza dello schermo), il trucco con l'utilizzo position: fixed; height: 100%di .col:beforeelemento può funzionare bene:

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>

Questo non è stato menzionato qui con compensazione.

Puoi usare l'assoluto per posizionare la barra laterale di sinistra.

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>

Prova questo

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

Questo utilizza Bootstrap 3, quindi non è necessario CSS aggiuntivo ecc ...

Hai visto l' afix del bootstrap nella sezione di JAvascript ???

Penso che sarebbe la soluzione migliore e più semplice amico.

Dai un'occhiata qui: http://getbootstrap.com/javascript/#affix

Dopo aver sperimentato il codice fornito qui: Bootstrap Tutorial

Ecco un'altra alternativa che utilizza l'ultimo 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>

CSS aggiuntivo:

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

Esempio JSFiddle

Spero che questo aiuti chiunque sia interessato.