Mise en page avec en-tête et pied de page fixes, barre latérale de largeur fixe et contenu flexible
J'essaie de mettre en place une mise en page qui ressemblera à ceci: 
Je souhaite utiliser Twitter Bootstrap pour le projet, mais je comprends que ce n'est peut-être pas la meilleure solution pour la mise en page de base qui ressemble à ceci. Je sais comment configurer l'en-tête et le pied de page pour qu'ils soient fixés en haut et en bas, mais j'ai de la difficulté à faire en sorte que ma barre latérale soit de largeur constante et qu'elle puisse défiler indépendamment.
Mon implémentation actuelle est la suivante: http://jsfiddle.net/Mwkrw/3/ .
J'ai essayé de configurer la barre latérale fixe à l'aide de Navigation dans la barre latérale fixe dans Twitter bootstrap 2.0 et quelques autres réponses similaires sur le débordement de pile, mais elles se cassent toutes lorsque la barre latérale est plus longue que le contenu et pour autant que je sache. n’est pas possible de lui donner un parchemin indépendant.
J'aimerais idéalement faire cela avec du css pur - pas de javascript. Je suis sûr que c'est possible et que c'est mon manque de compétences et de connaissances qui m'empêche de le faire correctement. Il est donc inutile d'ajouter du code javascript. (J'ajoute toujours une balise javascript au cas où ce ne serait pas possible)
Merci pour votre aide!
EDIT: Donc, mon en-tête n'a clairement pas besoin d'être positionné. Voici la nouvelle version améliorée: http://jsfiddle.net/Mwkrw/4/ Je suis toujours aux prises avec les deux div à défilement.
La magie est dans box-sizing:border-box;. Pour assurer la compatibilité avec Firefox, chrome <10 et safari <5.1, ajoutez les préfixes -webkit- et -moz-. IE le prend en charge à partir de la version 8.0.
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>very structured layout</title>
<style type='text/css'>
* {margin:0; padding:0;}
body {background:#fff; position:absolute; width:100%; height:100%;}
#main {background:#888; height:100%; padding:60px 0 40px; box-sizing:border-box;}
#head {background:#f8f; position:absolute; width:100%; height:60px;}
#left {background:#ff8; float:left; width:250px; height:100%; overflow:scroll;}
#right {background:#8f8; height:100%; overflow:scroll;}
#foot {background:#f88; position:absolute; bottom:0; width:100%; height:40px;}
</style>
</head>
<body>
<div id='head'>header: width = 100%, height = 40px</div>
<div id='main'>
<div id='left'>left: width = 250px, height = 100%</div>
<div id='right'>right: width = 100% - 250px, height = 100%</div>
</div>
<div id='foot'>foot: width = 100%, height = 60px</div>
</body>
</html>
edit : après que la solution d'Andres m'a permis de réaliser que je pouvais atteindre une meilleure compatibilité, j'ai un peu déconné et proposé une solution alternative, ce qui, à mon avis, est également plus intuitif. Cela ne fonctionne pas dans IE7, mais dans IE8.
La page est la même que ci-dessus, le seul changement étant que le CSS est remplacé par ceci:
* {margin:0; padding:0;}
body {background:#fff;}
#main {background:#888; position:absolute; top:40px; bottom:60px; width:100%;}
#head {background:#f8f; position:absolute; width:100%; height:40px;}
#left {background:#ff8; position:absolute; width:250px; height:100%; overflow:scroll;}
#right {background:#8f8; margin-left:250px; height:100%; overflow:scroll;}
#foot {background:#f88; position:absolute; bottom:0; width:100%; height:60px;}
Notez que, pour les deux versions, #head et #foot doivent avoir une propriété overflow autre que visible si leur contenu serait autrement étendu de la page.
J'ai réussi à obtenir la mise en page que vous avez créée dans votre publication en créant d'abord une classe de conteneur principale étirée à 100% à la fois verticalement et horizontalement. Ainsi, nous pouvons étirer complètement le contenu sur toute la hauteur de votre fenêtre d'affichage. Dans ce conteneur, div a créé un autre conteneur et l’a positionné de manière absolue tout en l’étirant dans toutes les directions, top, left, bottom, right, j’ai estimé que cette méthode était plus propre, car je peux facilement positionner l’en-tête et le pied de page sans avoir besoin de marges négatives mais ça n'a pas marché).
Voici une démo de la mise en page: http://jsfiddle.net/andresilich/gbzTN/1/show , éditez ici .
Et le code:
CSS
html, body {
height: 100%;
}
.main {
*zoom:1;
}
.main, .row-fluid {
height: 100%;
}
.main:before, .main:after,
.column:before, .column:after {
content: "";
display: table;
}
.main:after,
.column:after {
clear: both;
}
.column {
height: 100%;
overflow: auto;
*zoom:1;
}
.column .padding {
padding: 20px;
}
.box {
bottom: 40px;
left: 0;
position: absolute;
right: 0;
top: 40px;
}
.span9.full {
width: 100%;
}
.footer {
height: 40px;
width: 100%;
z-index: 100;
background-color: red;
bottom: 0;
left:0;
right:0;
position: fixed;
}
HTML
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> Username
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li class="divider"></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="main clearfix">
<div class="box">
<div class="row-fluid">
<div class="column span3">
<div class="padding">
.. content ..
</div>
</div>
<div class="column span9">
<div class="padding">
<div class="full span9">
.. content ..
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer clearfix">
<h3>footer</h3>
</div>
Edit : remarque que cette solution ne fonctionne pas comme prévu dans IE7 (fonctionne parfaitement dans IE8 et versions ultérieures). Voici donc un commentaire conditionnel ciblant tout ce qui se trouve sous IE8 et qui devrait résoudre le problème et le faire fonctionner correctement:
CSS
<!--[if lt IE 8]>
<style type="text/css">
html {
margin: 40px 0px;
overflow: hidden
}
.main {
zoom:1;
}
.column {
overflow-x: hidden !important;
overflow-y: scroll !important;
zoom: 1;
}
.box {
position: relative !important;
min-height: 100%;
height:100%;
zoom: 1;
top:0 !important;
}
.main {
margin: 40px 0px;
}
</style>
<![endif]-->
Maintenant que Bootstrap 4 est sorti, j'ai pensé que certains pourraient tirer profit de cette mise en page qui est maintenant un peu plus facile grâce à flexbox.
<body class="container-fluid d-flex flex-column h-100 align-items-center px-0">
<div class="row grow w-100">
<div class="header col-12 bg-primary py-2">
Header
</div>
<div class="side col-3 bg-light py-3 pl-0">
Menu
</div>
<div class="main col bg-warning py-3">
Main
</div>
</div>
<div class="row w-100 footer bg-danger">
<div class="col-12 py-3">
Footer
</div>
</div>
</body>
.grow {
flex: 1;
overflow: hidden;
}
.main,.side {
overflow-y: auto;
height:calc(100% - 55px);
}
.footer,.header {
height: 55px;
}