0
页面全屏显示时，一切正常，但如果我调整窗口大小，主视图会形成一个水平滚动条或位于左侧的导航栏下。我想要防止这种情况，并使其响应。如何正确定位元素
body {
height: 100%;
/* \t max-width: 100%;
overflow-x: hidden;*/
}
a,
a:hover {
color: black;
text-decoration: none;
}
/*Header */
/*============================*/
section .header {
height: 62px;
width: 100%;
background-color: #a5a0a0;
position: relative;
overflow: hidden;
}
.header h1 {
margin-top: 0px;
padding: .3em;
font-family: 'Lobster';
}
/* \t Navigation Bar
================================*/
section .nav-bar {
position: absolute;
width: 175px;
min-height: 100vw;
min-height: 900px;
background-color: #d4cccc;
float: left;
}
.nav-bar ul {
margin: 0;
padding: 0;
left: 0;
list-style: none;
width: 100%
}
.nav-bar ul li {
font-size: 20px;
padding: 10px;
padding-left: 25px;
width: 100%;
}
.nav-bar ul li:hover {
background-color: #8c8983;
}
/* \t Main Visual
===================================*/
.main-visual {
margin-top: 10px;
margin-left: 195px;
width: 1100px;
padding: 10px;
display: inline;
position: absolute;
right: 25px;
}
.main-visual img {
width: 500px;
}<!-- Link bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Lobster font -->
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<section>
<header class="header container-fluid">
<h1>Planes</h1>
</header>
</section>
<section>
<nav class="nav-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Facts</a></li>
<li><a href="#">Category</a></li>
</ul>
</nav>
</section>
<div class="main-visual container-fluid panel panel-default">
<img src="http://via.placeholder.com/500x200" class="img-responsive">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin venenatis venenatis odio, vitae efficitur risus. Nunc ornare tristique est sit amet aliquet. Vestibulum id erat nec enim fermentum dignissim. Suspendisse suscipit eu mi sit amet pulvinar.
Quisque porttitor arcu quis hendrerit hendrerit. Quisque ac tincidunt neque. Vestibulum consectetur eros id finibus porta. Pellentesque convallis sagittis tortor, ac gravida erat aliquam nec. Pellentesque quis elit id ipsum tempus sagittis. Quisque
venenatis, velit eget blandit ornare, eros justo tincidunt tellus, at eleifend nibh dui et ante. Aenean pharetra feugiat libero, et laoreet lacus feugiat quis. Vestibulum ac imperdiet mi. Nunc consectetur diam erat, vel tempus eros eleifend ut. Nam
elementum libero at sapien dignissim, sed bibendum enim commodo. Morbi vulputate, odio in semper maximus, mi lorem consectetur nisl, vitae fringilla magna lorem tristique est. Nulla nec rhoncus nibh, at laoreet magna.</p>
</div>Codepen：https://codepen.io/etasbasi/pen/rzLVeJ
而且也使导航栏总是完全覆盖左侧窗格中，根据主视觉的高度。
谢谢:)
谢谢，这个作品完美。我有两个问题：在这段代码中，导航栏是否占据了网页的全长？什么样的代码使主视觉响应，或者是它的默认行为？ –