当页面全屏时，一切都很好，但如果我调整窗口大小，主视觉要么形成水平滚动条，要么位于左侧导航栏下方。我想阻止这种情况，并使其具有响应性。
body {
height: 100%;
/* 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';
}
/* 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;
}
/* 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
并且还使导航栏始终完全覆盖左窗格，具体取决于主视觉的高度。
谢谢：）
答案 0 :(得分：0)
你不应该使用绝对定位来构建一个布局，直到你掌握（一个月的一个）：
一开始使用position:absolute;似乎很简单，但其目的不是构建整个布局。
你可以用浮点数（也可以是奇数，see this tutorial）给出一个开头，让你的元素保持在流程中。
要绘制列，您可以使用faux-column method（旧的但在这里可靠）。
body {
height: 100%;
/* max-width: 100%;
overflow-x: hidden;*/
/* background about : https://alistapart.com/article/fauxcolumns */
background: linear-gradient(to right, #d4cccc 175px, transparent 170px)
}
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';
}
/* Navigation Bar
================================*/
section .nav-bar {
float: left;
width: 175px;
margin-right: 10px;
}
.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;
}
.nav-bar ul li:hover {
background-color: #8c8983;
}
/* Main Visual
===================================*/
.main-visual {
margin: 10px;
overflow: hidden;
padding: 10px;
}
.main-visual img {
width: 500px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" 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>
如果你介意block formating context（在snipppet中使用溢出
，那么浮动块不需要宽度也不需要设置边距答案 1 :(得分：0)
如果您设置了已定义的宽度（对于.main-visual为1100px），则在调整页面大小时会保持固定状态，从而使其溢出到屏幕左侧，如前所述。您可以采取一些措施来解决这个问题：
设置一个百分比宽度，该宽度将导致元素根据浏览器的宽度发生变化。因此宽度：80％将导致元素占据其父元素宽度的80％，在这种情况下是父元素。
使用max-width属性而不是设置宽度。这意味着随着浏览器页面变大，元素将随之增长，直到达到最大宽度。我还建议你添加一些填充：0 10px;所以文本没有使用这种方法流到屏幕的边缘。