一个`position:fixed`侧边栏,其宽度设置为百分比？

Question

我已成功使用美丽的Susy网格系统来创建类似于WebDesignerWall.com的响应式布局:

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

当页面滚动并保持在同一位置时,这样的侧边栏不会滚动.这非常方便(无论如何,你实际上无法将更多内容放入侧边栏,因为它会在狭窄的窗口中混乱页面顶部).

每当我申请position:fixed专栏时,我的布局都会变得疯狂: 彩色块被声明为三列宽,但在position:fixed应用于侧栏时会进一步伸展.

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

问题是:如何在对其容器而不是视口测量其宽度的同时将列固定到窗口？

也许用JS来修复元素的位置是可能的？

PS我已经尝试了width: inherit解决方案,但它对我的情况没有任何帮助.

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

干杯.