我知道这个问题可能与被问到的问题相同，但我还没有找到解决方案。
我正在尝试创建一个左侧有主导航，右侧有内容的网站。
我已经能够在浏览器上使导航器达到全高，但如果内容比屏幕更大，那么导航器就不会完全停止。
我已经创建了一个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;
}
答案 0 :(得分：0)
您需要将position:fixed; CSS添加到导航栏。它将在浏览器窗口中修复，不会滚动。
答案 1 :(得分：0)
答案 2 :(得分：0)
我的回答的解决方案是将绝对值更改为固定值。答案来自@NarenMurali和@James。
感谢您的帮助。
答案 3 :(得分：0)
为导航栏和容器添加整体部分然后添加此css，抱歉我没有codepen登录
.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 -->