HTML & CSS + Twitter Bootstrap: mise en page complète ou hauteur 100% – Npx

J’essaie de faire la mise en page suivante:

+-------------------------------------------------+ | Header + search (Twitter navbar) | +------------+------------------------------------+ | | | | | | |Navigation | Content column | | | | | | | | | | | | | | | | | | | +------------+------------------------------------+ | Footer | +-------------------------------------------------+ 

La mise en page doit prendre toutes les hauteurs et largeurs disponibles, les colonnes de navigation et de contenu prennent tout l’espace disponible et défilent au débordement, le pied de page doit restr en bas.

HTML ressemble à ceci maintenant:

     Bootstrap 101 Template          

CSS:

 body, html, .container-fluid { /// take all available height height: 100%; } .article-tree { color: #DCE6E5; background: #2F323B; } .content-area { overflow: auto; height: 100%; /// explicit height to make scrolling work } .columns { height: 100%; /// columns should take all height margin-top: 42px; /// minus header margin-bottom: 20px; // minus footer } .columns > div { height: 100%; // make each column to take all available height } .footer { background: red; height: 20px; } 

En théorie, cela devrait fonctionner, mais columns.margin ne fonctionne pas comme prévu. Je pensais que cela devrait donner de la hauteur = 100% – magin, mais ça ne fait que déplacer le conteneur.

J’ai googlé et vu de nombreuses questions sur StackOverflow. Tous incluent JavaScript ou la position: positionnement absolu et manuel. À mon humble avis, ils sont plus de piratage qu’une solution, je pense qu’il devrait y avoir un moyen plus simple et plus élégant et multi-navigateur pour résoudre ce problème.

Alors, comment faire la mise en page décrite ci-dessus? Peut-être que Bootstrap peut m’aider (j’ai parcouru la documentation, mais il n’y a aucune mention de cas comme ça)?

J’ai trouvé un post ici sur Stackoverflow et mis en place votre design:

http://jsfiddle.net/bKsad/25/

Voici le message original: https://stackoverflow.com/a/5768262/1368423

Est-ce ce que vous cherchez?

HTML:

 
navigation column
content column

CSS:

 html, body { height: 100%; } .container-fluid { margin: 0 auto; height: 100%; padding: 20px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .columns { background-color: #C9E6FF; height: 100%; } .content-area, .article-tree{ background: #bada55; overflow:auto; height: 100%; } .footer { background: red; height: 20px; } 

Je sais qu’il est tard dans la journée mais pourrait aider quelqu’un d’autre!

 body,html { height: 100%; } .contentarea { /* * replace 160px with the sum of height of all other divs * inc padding, margins etc */ min-height: calc(100% - 160px); } 

Si vous utilisez Bootstrap 2.2.1, c’est peut-être ce que vous recherchez.

Exemple de fichier index.html

              

About.

Your application description page.

Use this area to provide additional information.

Use this area to provide additional information.

Use this area to provide additional information.

Use this area to provide additional information.

Use this area to provide additional information.

Use this area to provide additional information.


Est-ce ce que vous recherchez? Voici une démo de violon.

La mise en page est basée sur un pourcentage, les couleurs sont pour la clarté. Si la colonne de contenu déborde, une barre de défilement doit apparaître.

 body, html, .container-fluid { height: 100%; } .navbar { width:100%; background:yellow; } .article-tree { height:100%; width: 25%; float:left; background: pink; } .content-area { overflow: auto; height: 100%; background:orange; } .footer { background: red; width:100%; height: 20px; }