html - Bootstrap 4 - 使容器尺寸相对于屏幕宽度和高度

Question

我一直在努力解决这个问题。我需要容器大小始终与屏幕大小相关。如果我使用 min-height 和 max-height 设置高度，它会稍微起作用，但与屏幕尺寸不完全一致，默认情况下浏览器会添加一个我不想要的垂直滚动条。

我正在为外部 div 使用 container-fluid 属性。我附上一张图片，说明我是如何设计网格布局的。默认情况下，我希望 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;最大高度:100vh； overflow-y:scroll 您已添加到右侧的 div 中。在下面的示例中，我使用了 flexbox。另请注意，我为“菜单”部分分配了 20% 的高度和低于 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>