如何使侧面导航为全高，而不管内容的大小如何

Question

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

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

我已经能够使导航在浏览器上成为全高，但如果内容更大，那么屏幕，那么导航就不会一直向下。

我创建了一个代码笔来显示我想说的话。

代码笔

我的网页

<!-- 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 添加到导航栏中。它将在浏览器窗口中修复，并且不会滚动。

演示

Answer 2

尝试position: fixed而不是absolute。

固定元素相对于视口定位，它将始终保持在同一位置(即使页面滚动

(。例

Answer 3

我的答案的解决方案是将绝对更改为固定。答案来自@NarenMurali和@James。

谢谢你帮助我。

Answer 4

为导航栏和容器添加整体部分，然后添加此 css，抱歉我没有代码笔登录

.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 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>
</section>
<!-- END CONTENT AREA -->