html - 宽度为百分比的 `position:fixed` 侧边栏？

Question

我已经成功使用了美丽的Susy grid system创建类似于 WebDesignerWall.com: 之一的响应式布局

我未能实现的是 position:fixed 侧边栏。

当页面滚动并停留在同一个地方时，这样的侧边栏不会滚动。这非常方便(无论如何，您实际上不能将更多内容放入侧边栏，因为它会在窄窗口中使页面顶部变得困惑)。

每当我将 position:fixed 应用于列时，我的布局就会变得疯狂: 彩色 block 被声明为三列宽，但当 position:fixed 应用于侧边栏时会进一步拉伸(stretch)。

我认为问题是侧边栏的宽度是相对的，我。 e.以百分比设置。由于 position:fixed，宽度是根据浏览器窗口的宽度而不是其容器来测量的(尽管我将容器设置为 position:relative)。

问题是:如何在根据容器而不是视口(viewport)测量列的宽度时将列固定到窗口？

也许可以用JS固定元素的位置？

PS 我试过 width: inherit solution ，但这对我的情况没有任何帮助。

Answer 1

方法是使用第二个容器。我不知道你的确切代码，但这是一个例子。让我们假设您的结构是这样的:

<div class="page">
  <header class="banner">
    <h1>header</h1>
  </header>
  <nav class="navigation">
    <ul class="nav-inner">
      <li>navigation link</li>
    </ul>
  </nav>
  <article class="main">
    <h2>main content</h2>
  </article>
  <footer class="contentinfo">
    <p>footer</p>
  </footer>
</div>

我所做的唯一重要假设是确保在我的导航侧边栏周围有一个额外的包装器。我同时拥有 <nav>标签和 <ul>要使用的标签。您可以使用任何您想要的标签，只要侧边栏有两个可用于结构的标签 - 外部用于固定容器，内部用于侧边栏本身。 CSS 看起来像这样:

// one container for everything in the standard document flow.
.page {
  @include container;
  @include susy-grid-background;
}

// a position-fixed container for the sidebar.
.navigation {
  @include container;
  @include susy-grid-background;
  position: fixed;
  left: 0;
  right: 0;
  // the sidebar itself only spans 3 columns.
  .nav-inner { @include span-columns(3); }
}

// the main content just needs to leave that space open.
.main { @include pre(3); }

// styles to help you see what is happening.
header, article, .nav-inner, footer {
  padding: 6em 0;
  outline: 1px solid red;
}

干杯。