固定侧边栏在容器内的流动内容答案

【问题标题】：Fixed Sidebar Within Container With Fluid Content固定侧边栏在容器内的流动内容
【发布时间】：2015-11-27 20:23:20
【问题描述】：

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

我查看了一些答案，这些答案告诉我要在内容上设置一个左边距，这不是我想要做的。我能得到的最接近的是通过这个答案：

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;
  }
}

按照我现在的方式，一旦您检查侧边栏，它计算的宽度不在主容器内，而是在视口的其余部分。我想要实现的是将 20% 的计算保持在主容器内而不设置固定宽度。

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

我知道我可以做诸如侧边栏宽度 100px 内容边距左 100px 之类的事情，但这不是目标，也不喜欢任何 javascript 替代品。

想法？

谢谢！

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

感谢您的意见。但是，问题在于左侧边栏，它在整个容器之外流动。
好吧，现在的代码可以按原样工作。问题是侧边栏，一旦你修复它，侧边栏的宽度，而不是容器，将溢出到视口的右侧，而不考虑父容器（主容器）

【解决方案2】：

嗯，我想这就是固定元素的问题。他们有点自己的想法。一旦一个元素被固定，它似乎就不会遵守其父容器的溢出和维度规则。它们从浏览器宽度中获取尺寸（如果您使用的是 %）。所以我认为你应该做的是给固定元素与其直接容器相同的尺寸。

    <div id="parent-box">
        <div id="fixed-elem"></div>
    </div>

    //css
    #parent-box{
        position: relative;
        width: 40%;
        height: 100%;
        float: left;
        overflow: hidden;
    }

    #fixed-elem{
        position: fixed;
        width: 40%;/*this is 40% of the browser width not the container*/
        height: 100%;/*this is 100% of the browser height*/
    }

【讨论】：