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

Question

I have simple navigation bar and content made in Bootstrap 5. The problem is i want to use vh-100 and I put it in the content, but because of the size of navigation bar, the content goes below because navigation bar is pushing it.我有简单的导航栏和在 Bootstrap 5 中制作的内容。问题是我想使用vh-100并将其放入内容中，但是由于导航栏的大小，由于导航栏正在推送它，因此内容会在下方。 I want to make it both stay on the view page without to scroll bar and when I zoom, I want always to be able to see navigation bar and content.我想让它保持在视图页面上而不需要滚动条，当我缩放时，我希望始终能够看到导航栏和内容。

Here is what I've done so far:这是我到目前为止所做的：

https://jsfiddle.net/daxejno5/ 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

A combination of flex utilities , viewport sizing , and overflow seems to work. flex 实用程序、视口大小和溢出的组合似乎有效。

 .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="col-sm-9 p-0 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 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> </div> </body>

Answer 2

Here you go... Wrap the "navbar part" and the "content part" with a div , then add this CSS:在这里你 go... 用div包裹“导航栏部分”和“内容部分”，然后添加这个 CSS：

.navbar {
  position: absolute !important;
  width: 100%;
}

#card {
  position: absolute !important;
  height: 100vh !important;
  z-index: -1 !important;
}

Adding !important isn't an ideal way of solving problems, but you have two options:添加!important不是解决问题的理想方法，但您有两种选择：

leave HTML structure as it is and add !important to override Bootstrap (my solution) or保留 HTML 结构并添加!important以覆盖 Bootstrap（我的解决方案）或
change HTML structure in a way that you don't need to use !important .以不需要使用的方式更改 HTML 结构!important 。

 .bg-darkblue { background-color: #ccc; } #test { overflow-y: scroll; overflow-x: hidden; }.navbar { position: absolute;important: width; 100%: } #card { position; absolute:important; z-index: -1 !important; }

 <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> <div id='wrapper'> <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" id='card'> <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> </div> </body> </html>

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

问题描述

1 个解决方案

解决方案1
0 2022-02-03 14:26:21

解决方案2
0 2022-02-03 16:05:17

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

问题描述

1 个解决方案

解决方案1 0 2022-02-03 14:26:21

解决方案2 0 2022-02-03 16:05:17

解决方案1
0 2022-02-03 14:26:21

解决方案2
0 2022-02-03 16:05:17