导航栏下具有剩余视口高度的响应列

Question

我有一个非固定导航栏和两列。使用桌面布局没有问题，但是当我测试移动屏幕尺寸的响应能力时，我需要 A 列填充剩余视口的高度，B 列位于 A 列下方。此外，我需要一个解决方案这不涉及硬编码，比如减去导航栏的高度。我尝试过使用 Flexbox，但没有成功。相反，我得到的是两列都出现在视口中。我使用 Bootstrap 来提高响应能力。

Here there is a figure 这说明了我的问题。这是我到目前为止尝试过的代码：

.flex-container {
    display: flex;
    flex-direction: column;
}

#content {
    flex-grow: 1;
}

#row {
    flex-grow: 1; max-width: 100vw;
}

#col1 {
    background-color: dimgrey;color: white;
}

#col2 {
    background-color:darkslategrey;color: white
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Web title</title>
  </head>
  <body>
    <div class="vh-100 flex-container">
      <nav class="navbar navbar-dark bg-dark">
        <div class="container px-0">
          <span class="navbar-brand mb-0 h1">Navbar title</span>
        </div>
      </nav>
      <div id="content" class="container flex-container px-0">
          <div id="row" class="row mx-0">
            <div id="col1" class="col-sm px-0">
              Column 1 content
            </div>
            <div id="col2" class="col-sm px-0">
              Column 2 content
            </div>
          </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Answer 1

您正在寻找的是响应式设计。您可以使用 MediaQueri 来限制您看到的不同尺寸的内容。如果您正在使用 boostrap，那么对于您想要执行的功能，您可以做的最好的事情就是使用轮播。

访问 https://getbootstrap.com/docs/4.4/components/carousel/ 了解轮播的工作原理

Answer 2

阅读您的问题后，我了解到您希望第一个 child 显示全高，然后在滚动第一个 child 后显示第二个 child。

由于您的内容设置为 flex: 1，默认情况下占据整个剩余高度，您可以在这里利用它，现在设置 #row 及其 children 高度到 100% 如下

#row, #row > * {
    height: 100%
}

这将帮助您将 #row 及其 children 的高度设置为 100%。因此，它会在移动布局中为您提供所需的结果。

希望这能解决您的问题。

Answer 3

您需要使用媒体查询仅在最小屏幕宽度上设置高度 100vh ...

@media (max-width: 576px) {
    .min-100 {
        min-height: 100vh;
    }
}

https://codeply.com/p/1zHDI4rsc8

导航栏下具有剩余视口高度的响应列

Responsive columns with remaining viewport's height under a navbar

html

css

flexbox

responsive-design

bootstrap-4