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

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

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

我知道我可以做侧边栏宽度100px内容边距 - 左边100px，但这不是目标，不喜欢任何javascript替代品。

思想？

谢谢！

Answer 1

你在这个div中使用width:100%以及填充，它将宽度从100％增加，因为填充增加了宽度。因此，为了使填充在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;
}

Answer 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*/
    }

固定带有流体内容的容器中的侧边栏

2 个答案: