如何在 Bootstrap 中使导航栏和内容在全视图页面上拉伸？

Question

我在 Bootstrap 中制作了简单的导航栏和内容 5. 问题是我想使用 vh-100 并将其放在内容中，但是由于导航栏的大小，内容在下方，因为导航栏正在推动它。我想让它既停留在视图页面上而没有滚动条，又希望在缩放时始终能够看到导航栏和内容。

这是我到目前为止所做的：

https://jsfiddle.net/daxejno5/

.bg-darkblue{
    background-color: #ccc;
}

#test{
    overflow-y: scroll;
    overflow-x: hidden;
}

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
      <link rel="stylesheet" type="text/css" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light p-0 bg-darkblue">
    <div class="container-fluid">
        <a class="navbar-brand text-light" href="/">Test</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">

            </ul>
        </div>
    </div>
</nav>
    
<div class="col-sm-9 p-0">
    <div class="card rounded-0 vh-100">
        <div id="test" class="card-body p-0 d-flex flex-column-reverse">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid.
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid.
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid.
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid.
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid.
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid.
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid.
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid.
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid.
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid.
        </div>
        <div class="card-footer text-muted">
            <form id="test-form" class="m-0">
                <div class="row">
                    <div class="col">
                        <input type="text" class="form-control rounded-pill" autocomplete="off" placeholder="Type something...">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

Answer 1

flex utilities, viewport sizing, and overflow 的组合似乎有效。请注意，我已将您的页脚移到内容元素之外。它是 header 和内容元素的同级元素。

.bg-darkblue {
  background-color: darkblue;
}

<head>
  <link rel="stylesheet" type="text/css" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div class="d-flex flex-column vh-100">
    <nav class="navbar navbar-expand-lg navbar-dark p-0 bg-darkblue">
      <div class="container-fluid">
        <a class="navbar-brand text-light" href="/">Test</a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>

        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> </ul>
        </div>
      </div>
    </nav>

    <div class="flex-fill overflow-auto">
      <div class="card rounded-0">
        <div id="test" class="card-body p-0 d-flex flex-column-reverse">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor
          sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor sit amet
          consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor sit amet consectetur,
          adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor sit amet consectetur, adipisicing
          elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum
          ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero
          saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus
          magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo
          consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur
          voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid.
        </div>
      </div>
    </div>

    <div class="card-footer text-muted">
      <form id="test-form" class="m-0">
        <div class="row">
          <div class="col">
            <input type="text" class="form-control rounded-pill" autocomplete="off" placeholder="Type something...">
          </div>
        </div>
      </form>
    </div>
  </div>
</body>

如何在 Bootstrap 中使导航栏和内容在全视图页面上拉伸？

How to make navbar and content to be stretched on full view page in Bootstrap?

html

css

twitter-bootstrap

bootstrap-5