html - 如何正确定位元素

Question

当页面全屏时，一切都很好，但如果我调整窗口大小，主视觉要么形成水平滚动条，要么进入左侧导航栏下方。我想防止这种情况，并使其响应。

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>

代码笔:https://codepen.io/etasbasi/pen/rzLVeJ

并且还使导航栏始终完全覆盖左 Pane ，具体取决于主视觉的高度。

谢谢你:)

Answer 1

在您掌握(几个月的时间)之前，您不应该使用绝对定位来构建布局:

• 显示(内联 block 、表格、表格单元格、flex、最终网格、...)
• float 布局。

使用 position:absolute; 乍一看似乎很简单，但它的目的并不是构建一个完整的布局..

您可以使用 float 开始(这也可能很奇怪，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，则在 float 旁边的 block 不需要设置宽度或边距。 (代码段中这里使用了溢出