Force Bootstrap 4 column height to be content height

Question

On larger screens, the layout is the way I want it to be. However, on smaller screens, I want the 'Sidemenu' column to occupy its content height and the 'Main content' section to occupy the rest of the height of the page. How do I implement this with bootstrap? The first image shows the layout in large screens and the second image shows the layout in smaller screens. And here is the JsBin link https://jsbin.com/zimuwoyowe/7/edit?html,css,output.

Below shows the html used

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
  <div class="container d-flex h-100">
    <div class="row flex-grow-1">
      <div class="col-sm-4">
        <div class="row bg-white">
          <div class="col">
            Sidemenu
          </div>
        </div>
      </div>
      <div class="col-sm-8 bg-white">
        Main content
      </div>
    </div>
  </div>
</body>
</html>

And below is the CSS rules used.

html, body {
  background: grey;
}

html, body {
  height: 100%;
}

Fareed Khan · Answer 1 · 2020-06-28T13:17:57.897

0

You just need to remove the class of h-100 from container div and then giving css attribute of height:100vh to your main content div but not the body, so that the output is of your need!

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>
      body {
        background-color: gray;
      }
    </style>
  <title>Document</title>
</head>

<body>
  <div class="container d-flex">
    <div class="row flex-grow-1">
      <div class="col-sm-4">
        <div class="row bg-white">
          <div class="col">
            Sidemenu
          </div>
        </div>
      </div>
      <div class="col-sm-8 bg-white" style="height: 100vh;">
        Main content
      </div>
    </div>
  </div>

</body>

</html>

edited Jun 28 '20 at 13:17

answered Jun 28 '20 at 13:12

Fareed Khan

2,613
1
11
19

This has the problem that as the sidemenu content height(for eg, add height of 300px) increases, this pushes the main content down, thereby adding a scrollbar(even though the main content section doesn't have any content). To see what I mean, check this out https://jsbin.com/xugiwufuca/1/edit?html,output – lordvcs Jun 28 '20 at 13:32
@lordvcs you can check this example: https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space – Fareed Khan Jun 28 '20 at 13:39
Thanks for the help but I have already read that and it doesnt solve my problem – lordvcs Jun 28 '20 at 13:58

Force Bootstrap 4 column height to be content height

1 Answers1