如何有效地将此div与侧边栏对齐？

Question

我正在尝试将固定侧边栏和主容器并排放置。 所以侧边栏像侧面导航栏一样固定，容器可以上下滚动。有点像jsfiddle页面。但是滚动内容。这两个父母div之间应该没有任何差距。

到目前为止我试过这个。但事情已经结束了。侧边栏和内容之间存在巨大差距。

body {
  max-width: 90%;
  margin: 0 auto;
  background-color: whitesmoke;
}

.sidenavbar {
  /*max-width: 30%;*/
  min-width: 19%;
  min-height: 100%;
  /*width: 200px;*/
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  background-color: #fff;
  color: #000;
}

.container {
  float: right;
  width: 71%;
  overflow: auto;
}

.content {
  margin: 0 auto;
  /*padding: 2em 3em;*/
  overflow: auto;
  overflow-x: hidden;
}

<div class="sidenavbar">
  <div class="brand">
    <a href="#"><img id="logo" src="img.png" width="150px" alt="#"></a>
  </div>
</div>

<div class="container">
  <div class="content">
    <img src="img.png" alt="#">
    <h1>Generated Content</h1>
    <p>This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. </p>

    <h2>Hello!</h2>
    <p>
      This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph.
    </p>
  </div>
</div>

Answer 1

你做的一切都很完美，但你的容器使用width: 71%就是你搞砸了。 您不能拥有20％的固定边栏。当您使用％值时，它会变得流畅。我已经做了一个类似的例子，我想分享一下。您需要在这种情况下使用定位。这是一个固定流体的案例：

+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+

或者

+-------+-----------+
| FIXED | FLUUUUUID |
|       | FLUUUUUID |
+-------+-----------+

我已更改您的代码以使其更好：

＆＃13;

＆＃13;

body {
  max-width: 90%;
  margin: 0 auto;
  background-color: whitesmoke;
}

.sidenavbar {
  width: 200px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background-color: #fff;
  color: #000;
}

.container {
  padding-left: 200px;
}

.content {
  margin: 0 auto;
  padding: 15px;
}

＆＃13;

<div class="sidenavbar">
  <div class="brand">
    <a href="#"><img id="logo" src="//placehold.it/150x75?text=Sidebar" width="150" alt="Sidebar" /></a>
  </div>
</div>

<div class="container">
  <div class="content">
    <img id="logo" src="//placehold.it/150x75?text=Main+Logo" width="150" alt="Logo" />
    <h1>Generated Content</h1>
    <p>This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. </p>

    <h2>Hello!</h2>
    <p>
      This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus id vitae quidem eos aperiam quae facere iste illum doloremque, in temporibus earum nostrum saepe eius sed molestiae nam ad voluptatibus!</p>
    <p>Tempora maiores eaque quis aperiam minus dignissimos quae, labore ab impedit quidem aliquid, voluptatum consequatur magnam ratione fugit accusamus cumque voluptates! Magni quo natus atque maxime debitis qui nam accusantium.</p>
    <p>Corrupti temporibus iusto sequi, tenetur voluptatem, assumenda! Esse nesciunt, laborum! Quod ducimus quaerat praesentium in assumenda dignissimos harum, suscipit debitis at. Quasi laborum, ducimus earum quis dolor natus, obcaecati in.</p>
    <p>Vel veniam deleniti quos ab in, rem possimus labore sed expedita animi dolores id totam pariatur delectus beatae, consequatur maiores distinctio porro officiis numquam velit, sequi quia ea quasi? Sapiente.</p>
    <p>Quibusdam similique ipsa aut eligendi, rem amet assumenda officiis delectus mollitia dolorem cumque sit sint, consequatur unde cupiditate optio dolor ad, vitae ullam quo. Dolorum aperiam est explicabo aliquid totam?</p>
    <p>Amet ratione laboriosam iste dolore expedita magni, reprehenderit sed est, tempora ex asperiores ad harum. Mollitia distinctio dolor nostrum omnis dignissimos voluptate debitis eveniet quasi, in molestiae enim accusantium quis.</p>
    <p>Repellendus incidunt doloremque aspernatur ea, distinctio animi. Odit porro, ratione deserunt qui possimus esse! Quas nisi ipsa necessitatibus odit ipsum minima voluptate quam praesentium numquam natus. Accusamus adipisci quidem ad?</p>
    <p>Placeat magnam, in amet tempora aperiam perspiciatis sit culpa eius ullam inventore nam animi eveniet aspernatur, cupiditate sint minima quos debitis quaerat quasi, quas, sed similique. Autem totam, tempora numquam.</p>
    <p>Optio accusantium et, quas deleniti, itaque voluptatum repudiandae ipsam, sequi esse, veniam reprehenderit? Adipisci laborum libero culpa rem, eius eaque, unde temporibus, corrupti numquam ipsum est eum sed iusto quasi.</p>
    <p>Cumque nihil illum numquam hic mollitia vel ullam iure est ad, praesentium aspernatur ipsum reprehenderit cum labore alias culpa, impedit. Tenetur quibusdam incidunt voluptate eius voluptates repellendus voluptas pariatur autem.</p>
    <p>Quae ex natus inventore voluptatum minus porro ullam, assumenda laboriosam. Excepturi dignissimos et quos quam maiores provident error earum quisquam est, rem ex perferendis eos laborum saepe! Quam, pariatur, cupiditate!</p>
    <p>Quidem officiis explicabo repellat deserunt vero sit eius, eos nulla laboriosam libero pariatur quisquam iste soluta dicta quasi incidunt enim quae voluptatibus maiores vitae, odio fuga amet. Veritatis, sed, officia.</p>
    <p>Repudiandae ducimus debitis ab sed expedita, ad autem aperiam asperiores consequatur perferendis. Nihil ipsum sint officia placeat neque necessitatibus recusandae, error. Nesciunt amet ea nostrum reiciendis, velit fugit ex fuga!</p>
    <p>Illo, tempora magnam rem minima nulla veritatis reiciendis ipsum commodi dicta ab incidunt, rerum voluptatem necessitatibus autem debitis dolores vel, ratione sed perferendis impedit ex! Nam corporis, assumenda possimus culpa.</p>
    <p>Quam, quo, quis! Dolorum unde tempore eaque optio quos rem saepe distinctio eius maiores nesciunt obcaecati totam, repellat consectetur tenetur earum illo reprehenderit accusantium quisquam. Voluptas eaque perspiciatis in voluptatem?</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

请运行上面的代码片段并在此处以及全屏显示。侧边栏将被修复，您可以使用流畅的主要内容。

在我的详细文章中详细了解此方法：Science behind Fixed-Fluid Layouts。