html - 具有流动内容的容器内的固定侧边栏

Question

我正在尝试在一个容器中实现一个固定的左侧边栏，右侧的内容是流动的。

我已经查看了告诉我在内容上设置边距的答案，这不是我想要做的。我能得到的最接近的答案是:

A `position:fixed` sidebar whose width is set in percentage?

<div class="main-container">
  <div class="sidebar">
    <div class="sidebar-content-container">
      <div class="sidebar-content">
        <!-- Sidebar content here -->
      </div>
    </div>
  </div>
  <div id="content">
    <!-- Scrollable Content Here -->
  </div>
</div>

这是CSS

.main-container {
  height: 100vh;
  max-width: 1366px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 100px;
  width: 100%;
  position: relative;

  .sidebar {
    float: left;
    width: 20%;
    height: 100%;
    position: relative;

    .sidebar-content-container {
      height: 100%;
      position: fixed;

      .sidebar-content {
        display: block;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
    }
  }

  #content {
    height: 100%;
    width: 80%;
    display: inline-block;
    float: right;
  }
}

我现在的做法是，检查侧边栏后，它计算的宽度不在主容器内，而是视口(viewport)的其余部分。我想要实现的是在不设置固定宽度的情况下将 20% 的计算保留在主容器内。

所以黄色部分代表了我的问题。一旦我将其固定，它就不会留在父容器中。我的目标是设置为固定后，它保持在红色部分内。

我知道我可以做类似 sidebar width 100px content margin-left 100px 的事情，但这不是目标，也不喜欢任何 javascript 替代品。

想法？

谢谢!

Answer 1

您在此 div 中使用了 width:100% 并且还使用 padding 将其宽度从 100% 增加，因为 padding 增加了宽度。因此，为了在 100% 宽度内提供填充，您可以使用属性 box-sizing:border-box 如下:

.main-container {
  height: 100vh;
  max-width: 1366px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 100px;
  width: 100%;
  position: relative;
  box-sizing:border-box;
}