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
而且也使導航欄總是完全覆蓋左側窗格中，根據主視覺的高度。
謝謝:)
謝謝，這個作品完美。我有兩個問題：在這段代碼中，導航欄是否佔據了網頁的全長？什麼樣的代碼使主視覺響應，或者是它的默認行爲？ –