引导 4 - 使容器大小相对于屏幕宽度和高度

Question

我一直在拔头发试图弄清楚这一点。我需要容器大小始终相对于屏幕的大小。如果我使用最小高度和最大高度设置高度，它稍微有效，但与屏幕尺寸不完全相同，默认情况下浏览器会添加一个我不想要的垂直滚动条。

我正在为外部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

不需要您添加到右侧div 的min-height:100vh; max-height:100vh; overflow-y:scroll。在下面的示例中，我使用了弹性框。另请注意，我分配了高度为 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>