Bootstrap 4 - Making container sizes relative to the screen width and height

Question

I have been pulling my hair out trying to figure this out. I need the container size to be relative to the size of the screen at all times. If I set the height using min-height and max-height it slightly works but is not exact with the screens size and the browser by default adds a vertical scrollbar which I dont want.

I am using a container-fluid attribute for the outer div. Ill attach a picture with how I have my grid layout designed. I want the divs to cover the rest of the screen without adding a scrollbar by default. I have removed the height styles I have been trying.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class='container-fluid'>
  <div class='row content'>
    <div class='col-2 mr-auto pl-0 pr-0'>
      <div class='alert alert-primary mb-0'>
        <h2 class="text-center">Menu</h2>
      </div>
      <nav class="nav flex-column alert alert-primary" style="min-height:93vh;">
        <p><a href="{% url 'logout' %}">logout</a></p>
        <div class="btn-group dropright">
          <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Requisition
                        </button>
          <ul class="dropdown-menu">
            <li><a class="nav-link text-center" href="{% url 'requisition:create_req' %}">New Requisition</a></li>
            <li><a class="nav-link text-center" href="{% url 'requisition:basket' %}">Basket</a></li>
            <li><a class="nav-link text-center" href="{% url 'requisition:pending_action' %}">Pending</a></li>
            <li><a class="nav-link text-center" href="{% url 'requisition:assist_list' %}">Assistance Required</a></li>
          </ul>
        </div>

      </nav>
    </div>
    <div class='col-10 pl-0 pr-0'>
      <div class='alert alert-primary scrollbar' style="min-height:100vh; max-height:100vh; overflow-y:scroll">
        {% block content %}
        <br> Hi {{ user.username }}!

        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
        <button id="about-btn"> Click Me - I'm Javascript on Speed</button>
        <button class="ouch"> Click Me - I'm Javascript on Speed</button>

        <p><a href="{% url 'logout' %}">logout</a></p>
        {% endblock content %}
      </div>
    </div>

  </div>

</div>

Answer 1

No need for the min-height:100vh; max-height:100vh; overflow-y:scroll that you have added to the div on the right. In the example below I used flexbox. Note also that I assigned the "Menu" part with a height of 20% and the "nav" below that 80% so that it totals to 100%

html,
body {
  height: 100%;
}

div {
  border: 1px solid black;
  background: lightblue;
}

.mainwrapper {
  display: flex;
}

.brand {
  height: 20%;
}

.vertical-nav {
  height: 80%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="mainwrapper h-100">
  <div class="col-2 pl-0 pr-0 h-100">
    <div class="brand">
      <h2 class="text-center">Menu</h2>
    </div>
    <div class="vertical-nav">
      <p><a href="{% url 'logout' %}">logout</a></p>
      <div class="btn-group dropright">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Requisition
                        </button>
        <ul class="dropdown-menu">
          <li><a class="nav-link text-center" href="{% url 'requisition:create_req' %}">New Requisition</a></li>
          <li><a class="nav-link text-center" href="{% url 'requisition:basket' %}">Basket</a></li>
          <li><a class="nav-link text-center" href="{% url 'requisition:pending_action' %}">Pending</a></li>
          <li><a class="nav-link text-center" href="{% url 'requisition:assist_list' %}">Assistance Required</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div style="overflow-y: auto;" class="col-10 pl-0 pr-0 h-100">
    <div class='alert alert-primary scrollbar'>
      {% block content %}
      <br> Hi {{ user.username }}!

      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
      <button id="about-btn"> Click Me - I'm Javascript on Speed</button>
      <button class="ouch"> Click Me - I'm Javascript on Speed</button>

      <p><a href="{% url 'logout' %}">logout</a></p>
      {% endblock content %}
      <p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p>
    </div>
  </div>
</div>