Twitter bootstrap 3 deux colonnes pleine hauteur

J'essaie de faire une mise en page pleine hauteur à deux colonnes avec twitter bootstrap 3. Il semble que twitter bootstrap 3 ne prend pas en charge les mises en page pleine hauteur. Ce que je veux faire:

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

Si le contenu augmente, la navigation devrait également augmenter.

• La hauteur 100% pour chaque parent ne fonctionne pas car il y a le cas où le contenu est une ligne.
• la position absolue semble être la mauvaise façon
• display: tableet display:table-cellrésoudre le problème, mais ce n'est pas avec élégance

html:

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

Existe-t-il un moyen de le faire avec les classes Twitter bootstrap 3 par défaut ?

Edit: dans Bootstrap 4 , les classes natives peuvent produire des colonnes pleine hauteur ( DEMO ) car elles ont changé leur système de grille en flexbox. (Lisez la suite pour Bootstrap 3)

Démo Bootply / Codepen

Balisage:

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

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

Le code ci-dessus permettra d'obtenir des colonnes pleine hauteur (en raison des propriétés de table css personnalisées que nous avons ajoutées) et avec un rapport 1: 3 (Navigation: Contenu) pour des largeurs d'écran moyennes et supérieures - (en raison des classes par défaut de bootstrap: col-md -3 et col-md-9)

NB:

1) Afin de ne pas gâcher les classes de colonnes natives de bootstrap, nous ajoutons une autre classe comme no-floatdans le balisage et ne définissons display:table-cellet float:nonesur cette classe (que par rapport aux classes de colonnes elles-mêmes).

2) Si nous voulons uniquement utiliser le code de la table css pour un point d'arrêt spécifique (par exemple, des largeurs d'écran moyennes et supérieures) mais pour les écrans mobiles, nous voulons revenir par défaut au comportement de bootstrap habituel, nous pouvons envelopper notre CSS personnalisé dans un requête des médias, dites:

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

Démo Codepen

Maintenant, pour les écrans plus petits, les colonnes se comporteront comme des colonnes d'amorçage par défaut (chacune ayant sa pleine largeur).

3) Si le rapport 1: 3 est nécessaire pour toutes les largeurs d'écran - alors il est probablement préférable de supprimer les classes col-md- * de bootstrap du balisage, car ce n'est pas ainsi qu'elles doivent être utilisées.

Démo Codepen

Vous pouvez réaliser ce que vous voulez avec l' padding-bottom: 100%; margin-bottom: -100%;astuce, comme vous pouvez le voir dans ce violon.

Je change un peu votre code HTML, mais vous pouvez obtenir le même résultat avec votre propre code HTML avec le code suivant

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

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

Solution CSS pure

Violon de travail

En utilisant CSS2.1 uniquement, travaillez avec tous les navigateurs (IE8 +), sans spécifier de hauteur ou de largeur.

Cela signifie que si votre tête grandit soudainement plus, ou vos besoins de navigation de gauche pour agrandir, vous n'avez pas de réparer quoi que ce soit dans votre CSS.

Totalement réactif, simple et clair et très facile à gérer.

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

Explication: le conteneur divprend 100% de la hauteur du corps et il est divisé en 2 sections. La section d'en-tête s'étendra à la hauteur requise et HeightTakerprendra le reste. Comment est-il réalisé? en flottant un élément vide le long du conteneur avec une hauteur de 100% (en utilisant :before), et en donnant HeightTakerun élément vide à la fin avec la règle claire (en utilisant :after). cet élément ne peut pas être dans la même ligne que l'élément flottant, il est donc poussé jusqu'à la fin. qui est exactement le 100% du document.

Avec cela, nous faisons de la HeightTakertravée le reste de la hauteur du conteneur, sans indiquer de hauteur / marge spécifique.

à l'intérieur, HeightTakernous construisons une mise en page flottante normale (pour obtenir l'affichage comme une colonne) avec un changement mineur .. nous avons un Wrapperélément, qui est nécessaire pour que la 100%hauteur fonctionne.

Mettre à jour

Voici la démo avec les classes Bootstrap. (Je viens d'ajouter une div à votre mise en page)

J'ai pensé à un changement subtil, qui ne change pas le comportement d'amorçage par défaut. Et je ne peux l'utiliser que lorsque j'en ai eu besoin:

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

donc je peux l'utiliser comme ceci:

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

À ma connaissance, vous pouvez utiliser jusqu'à 5 méthodes pour y parvenir:

1. Utilisation des propriétés de tableau d'affichage CSS / cellule de tableau ou utilisation de tableaux réels.
2. Utilisation d'un élément positionné absolu à l'intérieur du wrapper.
3. Utilisation de la propriété d'affichage Flexbox mais, à ce jour, elle a toujours un support partiel
4. Simulez des hauteurs de colonne complètes en utilisant la technique des fausses colonnes .
5. Utilisation de la technique de remplissage / marge. Voir l'exemple .

Bootstrap: Je n'ai pas beaucoup d'expérience avec ça mais je ne pense pas qu'ils fournissent des styles pour ça.

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

Solution moderne et très simple:

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

Une solution CSS pure est assez facile et fonctionne comme un navigateur de charme.

Vous ajoutez simplement un grand remplissage et une marge négative tout aussi grande aux colonnes de navigation et de contenu, puis encapsulez leur ligne dans une classe avec débordement masqué.
Vue en direct
Modifier la vue

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

Bonne chance!

La solution peut être obtenue de deux manières

1. Utilisation de display: table et display: table-cell
2. Utilisation du rembourrage et de la marge négative.

Les classes utilisées pour obtenir la solution ci-dessus ne sont pas fournies dans le bootstrap 3. display: table et display: table-cell sont donnés mais uniquement lors de l'utilisation de tableaux en HTML. les classes de marge négative et de remplissage ne sont pas non plus présentes.

Par conséquent, nous devons utiliser des CSS personnalisés pour y parvenir.

Ce qui suit est la première solution

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

le css correspondant:

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

Ce qui suit est la deuxième solution

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

le css correspondant:

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, j'ai réalisé la même chose en utilisant Bootstrap 3.0

Exemple avec le dernier bootstrap

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

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

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

Il semble donc que votre meilleure option consiste à padding-bottomcontrer la margin-bottomstratégie négative .

J'ai fait deux exemples. L'un avec l' <header> intérieur .container et l'autre avec l' extérieur .

Les deux versions devraient fonctionner correctement. Notez l'utilisation de la @mediarequête suivante afin qu'elle supprime le remplissage supplémentaire sur les écrans plus petits ...

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

En dehors de cela, ces exemples devraient résoudre votre problème.

il y a un moyen beaucoup plus facile de le faire si tout ce qui vous préoccupe est de définir la couleur.

Mettez ceci en premier ou en dernier dans votre balise corporelle

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

et cela dans votre css

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

vous venez de créer une forme, de l'épingler derrière la page et de l'étirer à pleine hauteur. En utilisant les classes de bootstrap existantes, vous obtiendrez la bonne largeur et cela restera réactif.

Il y a quelques limitations avec cette méthode ofc, mais si c'est pour la structure racine de la page, c'est la meilleure réponse.

J'ai écrit un CSS simple compatible avec Bootstrap pour créer des tables pleine largeur et hauteur:

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

Le principe est:

• ajouter le "tablefull" sur un DIV principal
• puis implicitement, le DIV ci-dessous créera des lignes
• puis DIV sous les lignes seront des cellules
• Vous pouvez utiliser la classe "tableheader" pour les en-têtes ou similaires

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

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

essayer

<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 pour la classe .fill est ci-dessous

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

}

Pour votre référence, regardez simplement dans le violon.

essaye ça

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

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

Merci à Syed

S'il n'y aura pas de contenu après la ligne (toute la hauteur de l'écran est prise), l'astuce avec l'utilisation position: fixed; height: 100%de l' .col:beforeélément for peut bien fonctionner:

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>

Cela n'a pas été mentionné ici avec compensation.

Vous pouvez utiliser absolu pour positionner la barre latérale gauche.

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>

Essaye ça

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

Cela utilise Bootstrap 3 donc pas besoin de CSS supplémentaire, etc.

Avez-vous vu l' afix du bootstrap dans la section JAvascript ???

Je pense que ce serait le mec de solution le meilleur et le plus facile.

Jetez-y un œil: http://getbootstrap.com/javascript/#affix

Après avoir expérimenté avec le code fourni ici: Tutoriel Bootstrap

Voici une autre alternative utilisant la dernière version de Bootstrap v3.0.2:

Balisage:

<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 supplémentaire:

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

Exemple JSFiddle

J'espère que cela aide toute personne intéressée.