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

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. 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:

CodePudding user response：

Here you go... Wrap the "navbar part" and the "content part" with a div, then add this 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:

leave HTML structure as it is and add !important to override Bootstrap (my solution) or
change HTML structure in a way that you don't need to use !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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>

  <div id='wrapper'>
    <nav >
      <div >
        <a  href="/">Test</a>
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
        </button>
        <div  id="navbarText">
          <ul >

          </ul>
        </div>
      </div>
    </nav>
    <div >
      <div  id='card'>
        <div id="test" >
          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 >
          <form id="test-form" >
            <div >
              <div >
                <input type="text"  autocomplete="off" placeholder="Type something...">
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

</body>

</html>