Bootstrap Fullscreen Layout with 100% Height

Bootstrap fullscreen layout with 100% height

All you have to do is have a height of 100vh on your main container/wrapper, and then set height 100% or 50% for child elements.. depending on what you're trying to achieve. I tried to copy your mock up in a basic sense.

In case you want to center stuff within, look into flexbox. I put in an example for you.

You can view it on full screen, and resize the browser and see how it works. The layout stays the same.

.left {  background: grey;  }
.right {  background: black;  }
.main-wrapper {  height: 100vh;  }
.section {  height: 100%;    display: flex;  flex-direction: column;  justify-content: center;  align-items: center;}
.half {  background: #f9f9f9;  height: 50%;    width: 100%;  margin: 15px 0;}
h4 {  color: white;  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="main-wrapper">  <div class="section left col-xs-3">    <div class="half"><h4>Top left</h4></div>    <div class="half"><h4>Bottom left</h4></div>  </div>  <div class="section right col-xs-9">    <h4>Extra step: center stuff here</h4>  </div></div>

Fullscreen panel bootstrap with highcharts (100% height)

As you can read in Highcharts documentation:

By default (when null) the height is calculated from the offset height of the containing element, or 400 pixels if the containing element's height is 0.

So, if you didn't specify the width value on parent element, then your chart has taken the 400px value and set it by default.

In order to make it fits as expected, you need to define any CSS height values on all containing elements. For example:

.col-lg-8.col-md-8.col-xs-8 {
  height: 100%
}
.panel-body {
 height: 94%
}
#container,
#container2 {
  height: 100%
}

Live example: https://jsfiddle.net/jx46s9gn/

API Reference: https://api.highcharts.com/highcharts/chart.height

Twitter Bootstrap: div in container with 100% height

Set the class .fill to height: 100%

.fill { 
    min-height: 100%;
    height: 100%;
}

JSFiddle

(I put a red background for #map so you can see it takes up 100% height)

How can I make Bootstrap 4 columns have a height of 100%?

Use the Bootstrap 4 h-100 class for height:100%;

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 hidden-md-down" id="yellow">
      XXXX
    </div>
    <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8">
      Form Goes Here
    </div>
  </div>
</div>

https://www.codeply.com/go/zxd6oN1yWp

You'll also need ensure any parent(s) are also 100% height (or have a defined height)...

html,body {
  height: 100%;
}

Note: 100% height is not the same as "remaining" height.

---

Related: Bootstrap 4: How to make the row stretch remaining height?

Bootstrap - How to create a full screen layout with scrollable columns?

Make the container d-flex and then use flex-grow-1 to make the content area fill the height. You'll also want to use flex-shrink-0 on the Navbar and Footer so they don't "squish" in height.

<div class="container-fluid h-100 d-flex flex-column">
    <div class="row flex-shrink-0">
        <div class="col-12 border">Navbar </div>
    </div>
    <div class="row flex-grow-1">
        <div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
        <div class="col-4 border" style="overflow-y: scroll;">
            Article list
        </div>
        <div class="col-6 border" style="overflow-y: scroll;">Article content </div>
    </div>
    <div class="row flex-shrink-0">
        <div class="col-12 border">Footer </div>
    </div>
</div>

Demo: https://www.codeply.com/go/ouc3hddx5i

---

Related:

Use remaining vertical space with Bootstrap 4

Bootstrap 4.0 - responsive header with image + navbar + full-height body

Making bootstrap columns nested in rows take full screen height

What you are seeking can be possible with css and bootstrap combination.

Here What I have done.

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Grid </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
    .first .first_row{
      background-color: #ff0000;
      height: 50vh;
      border:2px solid black;
    }
    .first .second_row{
      background-color: #ffff00;
      height: 50vh;
      border:2px solid black;
    }

    .second .first_row{
      background-color: #cc99ff;
      height: 20vh;
      border:2px solid black;
    }
    .second .second_row{
      background-color: #ff0066;
      height: 20vh;
      border:2px solid black;
    }
    .second .third_row{
      background-color: #0099ff;
      height: 20vh;
      border:2px solid black;
    }
    .second .fourth_row{
      background-color: #006666;
      height: 20vh;
      border:2px solid black;
    }
    .second .fifth_row{
      background-color: #000099;
      height: 20vh;
      border:2px solid black;
    }
    .third .first_row{
      background-color: #006600;
      height: 100vh;
      border:2px solid black;
    }
    </style>
  </head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 first">
        <div class="row first_row">
        </div>
        <div class="row second_row">
        </div>  
      </div>
      <div class="col-md-6 second">
        <div class="row first_row">
        </div>
        <div class="row second_row">
        </div>
        <div class="row third_row">
        </div>
        <div class="row fourth_row">
        </div>
        <div class="row fifth_row">
        </div>
      </div>
      <div class="col-md-3 third">
        <div class="row first_row">
        </div>    
      </div>    
    </div>
  </div>
</body>
</html>

I hope it will help you.

P.S. Don't mind the colors.

Bootstrap 3 two columns full height

Edit:
In Bootstrap 4, native classes can produce full-height columns (DEMO) because they changed their grid system to flexbox. (Read on for Bootstrap 3)

---

The native Bootstrap 3.0 classes don't support the layout that you describe, however, we can integrate some custom CSS which make use of css tables to achieve this.

Bootply demo / Codepen

Markup:

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

(Relevant) CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

The above code will achieve full-height columns (due to the custom css-table properties which we added) and with ratio 1:3 (Navigation:Content) for medium screen widths and above - (due to bootstrap's default classes: col-md-3 and col-md-9)

NB:

1) In order not to mess up bootstrap's native column classes we add another class like no-float in the markup and only set display:table-cell and float:none on this class (as apposed to the column classes themselves).

2) If we only want to use the css-table code for a specific break-point (say medium screen widths and above) but for mobile screens we want to default back to the usual bootstrap behavior than we can wrap our custom CSS within a media query, say:

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

Codepen demo

Now, for smaller screens, the columns will behave like default bootstrap columns (each getting full width).

3) If the 1:3 ratio is necessary for all screen widths - then it's probably a better to remove bootstrap's col-md-* classes from the markup because that's not how they are meant to be used.

Codepen demo

---

Related Topics