Sections Height with bootstrap

Question

i wish to have the website fitting the page with no scrolling. I've 3 sections : header, section and footer i tried to test this: row-lg-1 for the header and the footer and row-lg-10 for the section, but it doesn't works, any idea ? So finally it's the "section" who must be resized automatically

PS : it must be done with bootstrap

My code :

<!DOCTYPE html>
<html>

  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>La maison de l'architecte</title>
    <meta name="description" content="Le site de la maison de l'architecture">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">

      /* Styles de base */
      body {
        font-family: 'Bitter', serif;
        background-color: #eef;
        color: #259;
      }
      nav img {
        width: 100%;
      }

      /* Styles pour les smartphones */
      #left, #side1, #side2 {
        padding: 10px 10px 0 10px;
      }

      /* Styles pour les tablettes */
      @media (min-width: 768px) {
        #left{
          padding: 0;
        }
        #side1 {
          padding: 10px 5px 0 0;
        }
        #side2 {
          padding: 10px 0 0 5px;
        }
      }

      /* Styles pour les écrans moyens et grands */
      @media (min-width: 992px) {
        #side1, #side2 {
          padding: 0 0 10px 10px;
        }
      }

    </style>

  </head>

  <body>

    <header class="col-lg-12 col-md-12">
      <a href="#"><img src="assets/img/maison.png" alt="logo" class="col-lg-1 col-md-1"></a>
      <h1 class="text-center">La maison de l'architecte</h1>
    </header>

    <nav class="">
      <div id="left" class="col-lg-8 col-md-8">
        <a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a>
      </div>
      <div id="side1" class="col-lg-4 col-md-4">
        <a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
      </div>
      <div id="side2" class="col-lg-4 col-md-4">
        <a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
      </div>
    </nav>

    <footer class="text-center">
      <a class="btn btn-primary" href="#"><i class="fa fa-twitter fa-2x"></i></a>
      <a class="btn btn-primary" href="#"><i class="fa fa-facebook fa-2x"></i></a>
      <a class="btn btn-primary" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
      <a class="btn btn-primary" href="#"><i class="fa fa-flickr fa-2x"></i></a>
      <a class="btn btn-primary" href="#"><i class="fa fa-spotify fa-2x"></i></a>
    </footer>

  </body>

</html>

When I Google `section fill entire page bootstrap` I seem to be seeing useful results? — Pekka, Jan 13 '16 at 12:22
Possible duplicate of [HTML&CSS + Twitter Bootstrap: full page layout or height 100% - Npx](http://stackoverflow.com/questions/14179166/htmlcss-twitter-bootstrap-full-page-layout-or-height-100-npx) — Pekka, Jan 13 '16 at 12:22
Sorry no, i checked it but it didn't helped. Could my code be helpfull ? — webdev, Jan 13 '16 at 14:44

score 0 · Accepted Answer · answered Jan 13 '16 at 22:47

There is no way that you can use some classes from Bootstrap to do this. However, you can achieve it by a little bit of jQuery, like this:

$(document).ready(function() {
    $(window).resize(function() {
         var curHeight = $(window).height();

         $("header").height((curHeight * 0.3) + "px");

         $("nav").height((curHeight * 0.6) + "px");

         $("footer").height((curHeight * 0.1) + "px");
    });
});

With this code, you will have 30% of viewport to header, 60% for nav, and 10% for footer. you can easily change these numbers at your will as long as they adds up to 1. Additionally, you need well-known clearfix class for your nav section since you have different images of different height in different columns. It will make sure that the height of nav is equal to the largest column's height inside nav:

HTML

 <nav class="clearfix">

CSS

 .clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
  }
  .clearfix { display: inline-block; }
   /* start commented backslash hack \*/
   * html .clearfix { height: 1%; }
   .clearfix { display: block; }
   /* close commented backslash hack */

You can read more about clearfix in HERE.

Could this work with a responsive design too ? Cause i'm not sure, i think i'll try the 2 ways. — webdev, Jan 14 '16 at 13:23
@webdev: It should because it reacts on every window resize event. — zero point, Jan 14 '16 at 16:02
finally i don't need to use it but thanks anyway (i know for what clearfix is) but now i've another problem... — webdev, Jan 14 '16 at 16:33

Sections Height with bootstrap

1 Answers1