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
もナビゲーションバーを常に完全にメインビジュアルの高さに応じて、左側のペインをカバーします。
ありがとうございました:)
ありがとう、これは完全に動作します。私は2つの質問があります：このコードでは、nav-barはWebページの全長をどのようにしますか？そして、どのコードがメインビジュアルを反応的にするのか、それともそのデフォルトの振る舞いですか？ –