Bootstrap: content fill height

user_9299799 0
Viewed 640

I have made this layout with bootstrap

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row">
      <div class="col-md-2 leftsidebar">left</div>
      <div class="col-md-8">
        <div class="row">
          <div class="col-md-12 header">header</div>
        </div>
        <div class="row">
          <div class="col-md-12 content">content</div>
        </div>
        <div class="row">
          <div class="col-md-12 footer">footer</div>
        </div>
      </div>
      <div class="col-md-2 rightsidebar">right</div>
    </div>
  </div>

Content should always fill out the page, so I want to get something along the lines of:

enter image description here

bootstrap-4 css html
1 Answers

Use code as below (run and see in full page):

    html,body{
        height:100%;
    }
    .leftsidebar{
    background:orange;
    }
    .rightsideba{
    background:green;
    }
    .vh-100{
        height: 100vh!important;
    }
    .footer{
        position: absolute;
        bottom: 0;
        width: 100%;
        background:red;
    }
    .content{
    background:skyblue;
     height: calc(100% - (30px));
    }
    .vw-100{
    width:100vw;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
      
     <div class="container-fluid  h-100">
    <div class="row">
      <div class="col-md-2 leftsidebar  vh-100">left</div>
      <div class="col-md-8">
        <div class="row header">
          <div class="col-md-12  h-100">header</div>
        </div>
        <div class="row content">
          <div class="col-md-12">content</div>
        </div>
        <div class="row footer">
          <div class="col-md-12   h-100">footer</div>
        </div>
      </div>
      <div class="col-md-2 rightsideba  vh-100 vw-100">right</div>

    </div>

user_91407400
Related