web-dev-qa-db-fra.com

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 toute la hauteur et la largeur disponibles, la navigation et les colonnes de contenu occupent tout l’espace disponible et faire défiler le texte en débordement, le pied de page doit rester en bas.

HTML ressemble à ceci maintenant:

<!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 prévu. Je pensais que cela devrait faire hauteur = 100% - magin, mais ça ne fait que déplacer le conteneur.

J'ai cherché sur Google et vu de nombreuses questions sur StackOverflow. Tous incluent JavaScript ou position: positionnement absolu et manuel. À mon humble avis, ce ne sont pas des solutions, mais je pense qu’il devrait exister un moyen plus simple, plus élégant et plus multi-navigateurs de résoudre ce problème.

Alors, comment puis-je 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)?

htmlcsscss3twitter-bootstrap
49
Daniel

J'ai trouvé un article ici sur Stackoverflow et mis en œuvre votre conception:

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

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

Est-ce ce que vous cherchez?

HTML:

<div class="container-fluid wrapper">

  <div class="row-fluid columns content"> 

    <div class="span2 article-tree">
      navigation column
    </div>

    <div class="span10 content-area">
      content column 
    </div>
  </div>

  <div class="footer">
     footer content
  </div>
</div>

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

Je sais qu'il est tard, mais je pourrais 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); 
}
14
Ed Wade

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

Exemple de fichier index.html 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/Site.css" rel="stylesheet" />
</head>
<body>
    <menu>
        <div class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">Application name</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/Home/About">About</a></li>
                        <li><a href="/Home/Contact">Contact</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/Account/Register" id="registerLink">Register</a></li>
                        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
                    </ul>

                </div>
            </div>
        </div>
    </menu>

    <nav>
        <div class="col-md-2">
            <a href="#" class="btn btn-block btn-info">Some Menu</a>
            <a href="#" class="btn btn-block btn-info">Some Menu</a>
            <a href="#" class="btn btn-block btn-info">Some Menu</a>
            <a href="#" class="btn btn-block btn-info">Some Menu</a>
        </div>

    </nav>
    <content>
       <div class="col-md-10">

               <h2>About.</h2>
               <h3>Your application description page.</h3>
               <p>Use this area to provide additional information.</p>
               <p>Use this area to provide additional information.</p>
               <p>Use this area to provide additional information.</p>
               <p>Use this area to provide additional information.</p>
               <p>Use this area to provide additional information.</p>
               <p>Use this area to provide additional information.</p>
               <hr />
       </div>
    </content>

    <footer>
        <div class="navbar navbar-default navbar-fixed-bottom">
            <div class="container" style="font-size: .8em">
                <p class="navbar-text">
                    &copy; Some info
                </p>
            </div>
        </div>
    </footer>

</body>
</html>
Fichier Contenu/Site.css
body {
    padding-bottom: 70px;
    padding-top: 70px;
}

3
Piotr Knut

Est-ce ce que vous recherchez? Voici un violon demo .

La mise en page est basée sur le 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;
}
0
fbynite