html - 无论内容大小如何，如何让侧边导航栏全高

Question

我知道这个问题可能与有人提出的问题相同，但我还没有找到解决方案。

我正在尝试创建一个左侧有侧边主导航，右侧有内容的网站。

我已经能够让导航在浏览器上达到全高，但是如果内容比屏幕大那么导航就不会一直向下。

我创建了一个 codepen 来展示我想说的话。

CODEPEN

我的 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 href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                                    <li><a href="gallery.html">Gallery</a></li>
                                    <li><a href="pricing.html">Pricing</a></li>
                                    <li><a 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 -->   

我的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;
}

Answer 1

您需要将 position:fixed; CSS 添加到您的导航栏。它将固定在浏览器窗口中，不会滚动。

DEMO