J'essaie de réaliser la mise en page suivante :
+-------------------------------------------------+
| Header + search (Twitter navbar) |
+------------+------------------------------------+
| | |
| | |
|Navigation | Content column |
| | |
| | |
| | |
| | |
| | |
| | |
+------------+------------------------------------+
| Footer |
+-------------------------------------------------+La mise en page doit occuper toute la hauteur et la largeur disponibles, les colonnes de navigation et de contenu occupent tout l'espace disponible et défilent en cas de débordement, le pied de page doit rester en bas.
Le HTML ressemble maintenant à ceci :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="css/app.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="navbar">
<!-- navbar content -->
</div>
<div class="row-fluid columns">
<div class="span2 article-tree">
<!-- navigation column -->
</div>
<div class="span10 content-area">
<!-- content column -->
</div>
</div>
<div class="footer">
<!-- footer content -->
</div>
</div>
</body>
</html>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 je l'espère. Je pensais que cela devrait faire height = 100% - magin, mais cela ne fait que déplacer le conteneur.
J'ai cherché sur Google et vu de nombreuses questions sur StackOverflow. Toutes incluent JavaScript ou position : absolute et le positionnement manuel. Je pense qu'il devrait y avoir une façon plus simple, plus élégante et multi-navigateurs de 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 celui-ci) ?
