How to get a side nav to be full height regardless of the size of the content

I know this question is probably the same as some that has been asked, but I haven’t found a solution yet.

I’m trying to create a site that has a side main navigation on the left and the content on the right.

I’ve been able to make the nav to be full height on the browser but if the content is bigger then the screen then the nav doesn’t go all the way down.

I’ve created a codepen to show what I’m trying to say.

CODEPEN

My HTML

<!-- BEGIN MENU AREA -->
        <nav class="navbar navbar-default navbar-inverse">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="current"><a target="_blank" rel="nofollow" href="index.html">Home</a></li>
                        <li><a target="_blank" rel="nofollow" href="about.html">About</a></li>
                                    <li><a target="_blank" rel="nofollow" href="gallery.html">Gallery</a></li>
                                    <li><a target="_blank" rel="nofollow" href="pricing.html">Pricing</a></li>
                                    <li><a target="_blank" rel="nofollow" href="contact.html">Contact</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->

            </div><!-- /.container-fluid -->
        </nav>
        <!-- END MENU AREA -->

        <!-- BEGIN CONTENT AREA -->
        <div class="container content_wrapper">
            <div class="row">
                <div class="col-lg-12 banner_wrapper">
                    <div class="single-item">
                      <div>
                        <img src="img/banner6.jpg" alt="">
                      </div>
                      <div>
                        <img src="img/banner7.jpg" alt="">
                      </div>
                      <div>
                        <img src="img/banner8.jpg" alt="">
                      </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12 services_wrapper">
                    <div class="col-lg-4 services">
                        <div>
                            <img src="img/cutting_and_styling.jpg">
                            <h1>Cutting & Styling</h1>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem. 
                                Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod. 
                                Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae, 
                                suscipit et metus. Praesent non porttitor lorem, at pretium eros. 
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-4 services">
                        <div>
                            <img src="img/Chemical_service.jpg">
                            <h1>Chemical Service</h1>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem. 
                                Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod. 
                                Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae, 
                                suscipit et metus. Praesent non porttitor lorem, at pretium eros.
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-4 services">
                        <div>
                            <img src="img/hair_treatment.jpg">
                            <h1>Treatment</h1>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem. 
                                Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod. 
                                Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae, 
                                suscipit et metus. Praesent non porttitor lorem, at pretium eros.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12 line">
                    <hr>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 home_content_area">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mi eros, porta rutrum lacinia quis, tristique 
                            molestie dui. Fusce interdum cursus eros, quis tincidunt mi. In vel neque non metus aliquet malesuada. Suspendisse 
                            aliquet purus ac justo cursus dictum. Donec viverra sapien sit amet ligula pretium aliquet. Curabitur suscipit 
                            faucibus purus quis luctus. Pellentesque congue vestibulum interdum. Sed in laoreet turpis, eu condimentum elit.
                        </p>

                        <p>
                            Aenean ipsum ex, gravida non auctor nec, interdum non nulla. Nullam vehicula felis id lacus ullamcorper, eu mollis 
                            mi pulvinar. In at libero nunc. Aliquam a lectus ac quam consequat egestas. Etiam a accumsan diam. Donec sed urna 
                            ut nunc placerat ultrices. Vestibulum ac blandit mauris, quis ultricies justo. Quisque semper mattis purus eu aliquet.
                        </p>

                        <p>
                            In tincidunt malesuada leo, euismod ornare magna mattis a. Aenean fringilla eros ut enim dictum, dapibus porttitor 
                            lectus egestas. Vestibulum ut erat bibendum, laoreet lacus eu, molestie est. Proin bibendum mauris et felis lobortis, 
                            quis consequat libero tincidunt. Donec leo ligula, porttitor ut auctor vel, malesuada et nisl. Donec condimentum 
                            malesuada sem sed rhoncus. Cras vitae tincidunt velit.
                        </p>

                        <p>
                            Mauris maximus ultricies ullamcorper. Praesent auctor euismod dignissim. Donec finibus, leo ut dictum tempus, 
                            lacus sem aliquet ligula, sed ornare nibh neque eleifend elit. Pellentesque semper convallis odio. Maecenas 
                            pharetra iaculis lacus sed ultricies. Sed id sapien aliquet lectus sagittis semper. Etiam ultrices odio sed 
                            dolor dictum commodo. Donec condimentum ac nisl eget vestibulum. Integer velit risus, interdum eget molestie in, 
                            faucibus ut magna. In imperdiet nisi erat, ut vehicula eros volutpat eget. Aliquam at lorem lacinia, accumsan 
                            nunc vitae, sollicitudin velit. Ut at dapibus dolor, ac ornare eros. Etiam dui sem, mollis eget lacus non, 
                            condimentum maximus lectus. Etiam eros sapien, ultricies scelerisque pellentesque eget, viverra a sapien. 
                            Quisque tincidunt ante accumsan blandit ultrices. Maecenas blandit facilisis dignissim. 
                        </p>
                </div>
            </div>
        </div>
        <!-- END CONTENT AREA -->   

My css

body{
          background-color: #4169E1;
          background-image: url("../img/light-grey-floral-motif.png");
      }

      .container{
          background: #ffffff none repeat scroll 0 0;
    border-radius: 5px;
    margin-left: 275px;
    margin-top: 20px;
    padding: 20px;
    width: 970px;
      }

      .navbar-default {
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          background-image: url("../img/light-grey-floral-motif.png");
      }

      .navbar-brand {
          float: none;
      }

      .navbar-nav {
          /*margin-top: 60px;*/
    text-align: center;
    width: 100%;
      }

      .navbar-nav li {
          display: block;
          float: none;
      }

      .webkrunch {
          bottom: 0;
          color: #ffffff;
          position: absolute;
      }

      .webkrunch a img {
          margin-left: 40px;
      }

      .services img {
    width: 100%;
}

.banner_wrapper img {
    width: 100%;
}

.banner_wrapper {
    margin-bottom: 20px;
}

.gallery_image > img {
    width: 100%;
}

.services_wrapper h1 {
    font-family: Gabriela;
    font-size: 26px;
}

.services div {
    background: #d6eaf8 none repeat scroll 0 0;
}

.services_wrapper {
    text-align: center;
}

.services_wrapper p {
    padding: 0 20px 15px;
}

.line hr {
    border-color: #333;
    border-width: 2px;
    width: 80%;
}

.home_content_area {
    text-align: center;
}

.services {
    padding-left: 0;
}

.services:last-child {
    padding: 0;
}

.about_content_area h1 {
    font-family: Gabriela;
    margin-top: 0;
    text-decoration: underline;
}

.gallery_title h2 {
    font-family: Gabriela;
}


.gallery_title {
    color: #333;
    padding-bottom: 1px;
    text-align: center;
    vertical-align: middle;
}

.gallery_category {
    background: #d6eaf8;
}

.gallery_area h1 {
    font-family: Gabriela;
}

.gallery_items img {
    margin-bottom: 10px;
    margin-right: 10px;
}

.pricing_table tr:first-child {
    font-weight: bold;
}

.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: #d6eaf8;
}

table.pricing_table tr td:first-child {
    font-weight: bold;
}

You need to add position:fixed; CSS to your navbar. It will be fixed in the browser window and will not scroll.

DEMO

Try position: fixed instead of absolute.

A fixed element is positioned relative to the viewport, it will always stay in the same place (even if the page is scrolled).

Example

The solution to my answer was to change absolute to fixed. The answer came from both @NarenMurali and @James.

Thanks for helping me.

add overall section for both navbar and container and then add this css, sorry i don’t have codepen login

.navbar{
  padding-bottom:1000px;
  margin-bottom:-1000px;
}
.overall{
  overflow:hidden;
}



<!-- BEGIN MENU AREA -->
<section class="overall">
        <nav class="navbar navbar-default navbar-inverse">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="current"><a target="_blank" rel="nofollow" href="index.html">Home</a></li>
                        <li><a target="_blank" rel="nofollow" href="about.html">About</a></li>
                                    <li><a target="_blank" rel="nofollow" href="gallery.html">Gallery</a></li>
                                    <li><a target="_blank" rel="nofollow" href="pricing.html">Pricing</a></li>
                                    <li><a target="_blank" rel="nofollow" href="contact.html">Contact</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->

            </div><!-- /.container-fluid -->
        </nav>
        <!-- END MENU AREA -->

        <!-- BEGIN CONTENT AREA -->
        <div class="container content_wrapper">
            <div class="row">
                <div class="col-lg-12 banner_wrapper">
                    <div class="single-item">
                      <div>
                        <img src="img/banner6.jpg" alt="">
                      </div>
                      <div>
                        <img src="img/banner7.jpg" alt="">
                      </div>
                      <div>
                        <img src="img/banner8.jpg" alt="">
                      </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12 services_wrapper">
                    <div class="col-lg-4 services">
                        <div>
                            <img src="img/cutting_and_styling.jpg">
                            <h1>Cutting & Styling</h1>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem. 
                                Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod. 
                                Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae, 
                                suscipit et metus. Praesent non porttitor lorem, at pretium eros. 
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-4 services">
                        <div>
                            <img src="img/Chemical_service.jpg">
                            <h1>Chemical Service</h1>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem. 
                                Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod. 
                                Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae, 
                                suscipit et metus. Praesent non porttitor lorem, at pretium eros.
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-4 services">
                        <div>
                            <img src="img/hair_treatment.jpg">
                            <h1>Treatment</h1>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem. 
                                Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod. 
                                Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae, 
                                suscipit et metus. Praesent non porttitor lorem, at pretium eros.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12 line">
                    <hr>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 home_content_area">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mi eros, porta rutrum lacinia quis, tristique 
                            molestie dui. Fusce interdum cursus eros, quis tincidunt mi. In vel neque non metus aliquet malesuada. Suspendisse 
                            aliquet purus ac justo cursus dictum. Donec viverra sapien sit amet ligula pretium aliquet. Curabitur suscipit 
                            faucibus purus quis luctus. Pellentesque congue vestibulum interdum. Sed in laoreet turpis, eu condimentum elit.
                        </p>

                        <p>
                            Aenean ipsum ex, gravida non auctor nec, interdum non nulla. Nullam vehicula felis id lacus ullamcorper, eu mollis 
                            mi pulvinar. In at libero nunc. Aliquam a lectus ac quam consequat egestas. Etiam a accumsan diam. Donec sed urna 
                            ut nunc placerat ultrices. Vestibulum ac blandit mauris, quis ultricies justo. Quisque semper mattis purus eu aliquet.
                        </p>

                        <p>
                            In tincidunt malesuada leo, euismod ornare magna mattis a. Aenean fringilla eros ut enim dictum, dapibus porttitor 
                            lectus egestas. Vestibulum ut erat bibendum, laoreet lacus eu, molestie est. Proin bibendum mauris et felis lobortis, 
                            quis consequat libero tincidunt. Donec leo ligula, porttitor ut auctor vel, malesuada et nisl. Donec condimentum 
                            malesuada sem sed rhoncus. Cras vitae tincidunt velit.
                        </p>

                        <p>
                            Mauris maximus ultricies ullamcorper. Praesent auctor euismod dignissim. Donec finibus, leo ut dictum tempus, 
                            lacus sem aliquet ligula, sed ornare nibh neque eleifend elit. Pellentesque semper convallis odio. Maecenas 
                            pharetra iaculis lacus sed ultricies. Sed id sapien aliquet lectus sagittis semper. Etiam ultrices odio sed 
                            dolor dictum commodo. Donec condimentum ac nisl eget vestibulum. Integer velit risus, interdum eget molestie in, 
                            faucibus ut magna. In imperdiet nisi erat, ut vehicula eros volutpat eget. Aliquam at lorem lacinia, accumsan 
                            nunc vitae, sollicitudin velit. Ut at dapibus dolor, ac ornare eros. Etiam dui sem, mollis eget lacus non, 
                            condimentum maximus lectus. Etiam eros sapien, ultricies scelerisque pellentesque eget, viverra a sapien. 
                            Quisque tincidunt ante accumsan blandit ultrices. Maecenas blandit facilisis dignissim. 
                        </p>
                </div>
            </div>
        </div>
</section>
        <!-- END CONTENT AREA -->