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

不需要添加到右侧div的min-height:100vh; max-height:100vh; overflow-y:scroll。在下面的示例中，我使用了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>

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

1 个答案: