Height calc isn't responding at all

Question

I've been trying to make a basic bootstrap page, and I want to set the height of the middle columns to be a responsive height, so that my page takes up the full screen. I used This SO link to try to figure it out, and implemented the solutions they had there too, which still didn't work. If there's anything I can specify or explain better to write a better question please say so. I'm not sure what is wrong with it, so any help would be appreciated on how to make this work. Thanks!

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#header {
  height: 150px;
  background-color: red;
}

#footer {
  height: 150px;
  background-color: orange;
}

#col1 {
  background-color: blue;
}

#col2 {
  background-color: green;
}

#col3 {
  background-color: yellow;
}

.maincol {
  height: calc(100% - 300px);
  height: -moz-calc(100% - 300px);
  height: -webkit-calc(100%-300px);
  display: block;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS/Bootstrap/jQuery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <link rel="stylesheet" href="layout.css">
</head>

<body>
  <!--Header of page-->
  <div class="container-fluid">
    <div class="row" id="header">
      <div class="col-sm-12">Some text</div>
    </div>
  </div>
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-4 maincol" id="col1">Some text</div>
      <div class="col-sm-4 maincol" id="col2">Some text</div>
      <div class="col-sm-4 maincol" id="col3">Some text</div>
    </div>
  </div>
  
  <div class="container-fluid">
    <div class="row" id="footer">
      <div class="col-sm-12">Some text</div>
    </div>
  </div>
</body>

From what I understand, I think `height: 100%` would make the element take up the height of the parent container. If there is no height set for that container, it just takes up the default amount for that container - as if nothing was set for height. Your `row` and `container-fluid` classes don't have a height set. If you set those, then your height calculation with the 100% would work. Also, I think there may be issues with using different types in the calc function. You're using % and px. Maybe that's just a LESS thing. Either way, JS manipulation of the height might be your best bet. — adprocas, Mar 05 '18 at 17:11

score 0 · Accepted Answer · answered Mar 05 '18 at 17:25

0

try this if you target modern browsers:

.maincol {
  height: calc(100vh - 300px);
  height: -moz-calc(100vh - 300px);
  height: -webkit-calc(100vh-300px);
  display: block;
}

or switch to bootstrap 4 if you can and use flex grid :)

answered Mar 05 '18 at 17:25

Damian Martyniuk

378
3
14

Perfect, thank you! So why does it have to be VH instead of the %? – Joel Banks Mar 05 '18 at 17:27
if you use % your parent element should have height set, for example in px via javascript - then it would work. VH equals to your browser viewport height. – Damian Martyniuk Mar 05 '18 at 17:31
Oh ok. Thank you! The answer seems so simple now – Joel Banks Mar 05 '18 at 17:32

Height calc isn't responding at all

1 Answers1