Bootstrap 4 - Создание размеров контейнера относительно ширины и высоты экрана

Question

Я вырывал свои волосы, пытаясь понять это.Мне нужно, чтобы размер контейнера всегда был относительно размера экрана.Если я устанавливаю высоту, используя min-height и max-height, это немного работает, но не точно с размером экрана, и браузер по умолчанию добавляет вертикальную полосу прокрутки, которая мне не нужна.

Я использую атрибут контейнера-жидкости для внешнего div.Я приложу картинку с тем, как у меня спроектирована сетка.Я хочу, чтобы div-ы покрывали остальную часть экрана без добавления полосы прокрутки по умолчанию.Я удалил стили высоты, которые я пробовал.

<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

Нет необходимости в min-height:100vh; max-height:100vh; overflow-y:scroll, который вы добавили в div справа.В приведенном ниже примере я использовал flexbox.Также обратите внимание, что я назначил часть «Меню» с высотой 20% и «nav» ниже 80%, чтобы она составляла 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>