0

I'm currently in the process of learning Bootstrap and I'm still fairly new, so please go easy on me. I'm trying to make a page where there is a main heading for the page, a heading above the grids, and 3 unequal responsive grids than span the height of the rest of the page, even when the browser is resized. I've tried setting height or row and each div to 100%, I also tried looking this up but I didn't find anything of much use, and I'm not sure how I would achieve this, Thanks for taking the time to help. Code is:

EDIT: To specify, my issue is getting the remaining area to take up 100% of space, not a div taking up 100% of the page, just the remaining part

.div1 {
  background-color:red;
}

.div2 {
  background-color:gray;
}

.div3 {
  background-color:blue;
}

.row {
  height: 100%;
}

#main {
  background-color: yellow;
}
    <!DOCTYPE html>
    <html>
      <html lang="en">
    <head>
      <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
    
    </head>
    <body>
      
    <link rel="stylesheet" href="test.css">
    <script src="test.js"></script>
    <h1>Welcome</h1>
    <div class="container-fluid" id="main">
      <h1>This is a heading</h1>
      
      <div class="row">
        <div class="col-sm-3 div1">Left side</div>
        <div class="col-sm-6 div2">Middle</div>
        <div class="col-sm-3 div3">Right side</div>
      </div>
    </div>
    
    </body>
    </html>
Joel Banks
  • 141
  • 3
  • 14

1 Answers1

2

Try this

.row {
    height: 100vh;
}

More information here: https://stackoverflow.com/a/16837667/7361767

Millicent
  • 86
  • 6
  • That's closer to what I want, but that still gives it one full page of the div, as well as the headings, is there a way to make it just take up space until the bottom of the page? – Joel Banks Nov 10 '17 at 18:20