html - 我怎样才能得到一个固定的侧边栏？

Question

我正在使用以下代码构建一个固定侧边栏，它的高度应始终为 100%，宽度应始终为 20%。主要部分应该显示在它旁边。

#sidebar {
  width: 20%;
  position: fixed;
  background: red;
  height: 100%;
}
main {
  width: 80%;
  background: blue;
  min-height: 1200px;
}

<div id="sidebar">

  <nav>

    <ul>

      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>

    </ul>

  </nav>

</div>


<main>

  <div id="content">

    Content

  </div>

</main>

代码似乎不起作用。我做错了什么？

Answer 1

通过修复侧边栏，您会将其从 CSS 元素的通常顺序中删除。因此，在此处将 main 设置为 80% 并不会真正产生您希望实现的 20% + 80% 错觉。相反，您的 main 位于侧边栏的下方，并且它的宽度也只有 80%。

你想要的是 100% main，左边有 20% 的填充，所以什么都不会到达那里，因此您的所有内容都是可见的。

#sidebar {
  width: 20%;
  position: fixed;
  background: red;
  height: 100%;
}
main {
  width: 100%;
  box-sizing: border-box;
  padding-left: 20%;
  background: blue;
  min-height: 1200px;
}

<div id="sidebar">

  <nav>

    <ul>

      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>

    </ul>

  </nav>

</div>


<main>

  <div id="content">

    Content

  </div>

</main>