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

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:

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/[email protected]/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>

enter image description here

htmlcsstwitter-bootstrapbootstrap-5


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions