web-dev-qa-db-fra.com

Twitter bootstrap 3 deux colonnes pleine hauteur

J'essaie de créer deux colonnes pleine hauteur mise en page avec Twitter Bootstrap 3. Il semble que Twitter bootstrap 3 ne prend pas en charge les mises en page pleine hauteur .

  +-------------------------------------------------+
  |                     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 un cas où le contenu est une ligne.
  • la position absolue semble être le mauvais sens
  • display: table et display:table-cell, mais ce n'est pas élégant

html:

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

Y a-t-il moyen de le faire avec default Twitter bootstrap 3 classes?

htmlcsstwitter-bootstrap
229
uladzimir

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

Les classes natives Bootstrap 3.0 ne prennent pas en charge la présentation que vous décrivez, cependant, nous pouvons intégrer des CSS personnalisés qui utilisent les tables css pour y parvenir.

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>

CSS (pertinent)

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 colonnes de hauteur complète (en raison des propriétés personnalisées de la table css que nous avons ajoutées) et avec ratio 1: 3 (Navigation: Contenu) pour largeurs d'écran moyen et ci-dessus - (en raison des classes par défaut de bootstrap: col-md-3 et col-md-9) 

NB: 

1) Afin de ne pas perturber les classes de colonnes natives de Bootstrap, nous ajoutons une autre classe telle que no-float dans le balisage et définissons uniquement display:table-cell et float:none sur cette classe (par rapport aux classes de colonnes elles-mêmes).

2) Si nous voulons uniquement utiliser le code de la table css pour un point de rupture spécifique (par exemple, les largeurs d'écran moyennes et supérieures), nous souhaitons revenir par défaut au comportement d'amorçage habituel. CSS personnalisé dans une requête multimédia, par exemple:

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

Démo Codepen

Désormais, pour les écrans plus petits, les colonnes se comporteront comme des colonnes d’amorçage par défaut (chacune ayant sa largeur totale).

3) Si le rapport 1: 3 est nécessaire pour toutes les largeurs d'écran, il est probablement préférable de supprimer les classes col-md- * de bootstrap du balisage, car ce n'est pas la manière dont elles sont censées être utilisées.

Démo Codepen

200
Danield

Vous pouvez réaliser ce que vous voulez avec l’astuce padding-bottom: 100%; margin-bottom: -100%;. Vous pouvez voir dans this fiddle.

Je modifie 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%;
}
65
Oswaldo Acauan

Solution pure CSS

Travailler Fiddle

Utilisation de CSS2.1 uniquement, fonctionne avec tous les navigateurs (IE8 +), sans spécifier de hauteur ni de largeur.

Cela signifie que si votre en-tête s'allonge soudainement ou si votre navigation à gauche doit être agrandie, vous n'avez pas à corriger rien 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 div prend 100% de la hauteur du corps et il est divisé en 2 sections . La section d'en-tête s'étend sur la hauteur souhaitée et HeightTaker prend le reste ..__ Comment est-ce atteint? en faisant flotter un élément vide le long du conteneur avec 100% de hauteur (avec :before), et en donnant à la HeightTaker un élément vide à la fin avec la règle clear (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'au bout. qui est exactement le 100% du document.

Avec cela, nous faisons en sorte que HeightTaker couvre le reste de la hauteur du conteneur, sans indiquer de hauteur/marge spécifique.

à l'intérieur de cette HeightTaker, nous construisons une disposition flottante normale (pour obtenir la colonne comme un affichage) avec une modification mineure .. nous avons un élément Wrapper qui est nécessaire pour que la hauteur de 100% fonctionne.

Mettre à jour

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

38
avrahamcool

J'ai pensé à un changement subtil, qui ne modifie pas le comportement de bootstrap par défaut . Et je ne peux l'utiliser que quand j'en ai 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 avoir l'utiliser comme ça:

<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

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

  1. Utilisation des propriétés d'affichage CSS de table/cellule-cellule ou utilisation de tables réelles.
  2. Utilisation d'un élément absolu positionné à l'intérieur du wrapper.
  3. Utilisation de la propriété d'affichage Flexbox mais, à ce jour, il prend toujours en charge partial
  4. Simulez des hauteurs de colonne complètes en utilisant la technique faux colonne .
  5. Utilisation de la technique de remplissage/marge. Voir exemple .

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

.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

Une solution CSS pure est assez simple et fonctionne comme un navigateur croisé de charme. 

Vous ajoutez simplement un grand remplissage et une marge négative également importante aux colonnes nav et content, puis vous enroulez leur ligne dans une classe avec débordement masqué.
Vue en direct
Modifier 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!

6
David Taiaroa

La solution peut être obtenue de deux manières

  1. Utiliser display: table et display: table-cellule
  2. Utiliser un rembourrage et une marge négative.

Les classes utilisées pour obtenir la solution ci-dessus ne sont pas fournies dans bootstrap 3 . Display: table et display: cellule-cellule 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 Là.

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

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

Le ci-dessous 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;
    }
5
user2594152

Ok, j'ai réalisé la même chose avec 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;
}
4
VAShhh

Il semble donc que votre meilleure option est d'utiliser la stratégie padding-bottom contrée par la stratégie négative margin-bottom.

J'ai fait deux exemples. Un avec <header>inside.container, et un autre avec outside.

Les deux versions devraient fonctionner correctement. Notez l'utilisation de la requête @media suivante afin qu'elle supprime le remplissage supplémentaire sur des é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.

3
Giovanni Silveira

il existe un moyen beaucoup plus facile de le faire si tout ce qui vous préoccupe est de fixer la couleur.

Mettez ceci en premier ou en dernier dans votre balise body

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

et ceci dans votre css

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

vous créez simplement une forme, épinglez-la derrière la page et étirez-la à toute la hauteur. En utilisant les classes bootstrap existantes, vous obtiendrez la bonne largeur et resterez réactif.

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

2
Simon Stevens

J'ai écrit un simple CSS compatible avec Bootstrap pour créer des tableaux de largeur et de hauteur complètes:

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

Le principe est:

  • ajouter la "tablefull" sur une DIV principale 
  • alors implicitement, la 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;
}
2
Guillaume F.

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 

1
Amol Shiledar

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 dans le fiddle.

1
Krishna Rani Sahoo

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