I've successfully used the beautiful Susy grid system to create a responsive layout similiar to the one of WebDesignerWall.com:
我未能实现的是position:fixed侧边栏。
当页面滚动时，这样的侧边栏不会滚动并停留在同一位置。这非常方便（无论如何，您实际上无法将更多内容放入侧边栏中，因为它会使狭窄窗口中的页面顶部变得混乱）。
My layout goes crazy whenever i apply position:fixed to a column:
The colored blocks are declared three-column wide, but stretch further when position:fixed is applied to the sidebar..
我认为问题在于侧边栏的宽度是相对的，即。 e.以百分比设置。由于position:fixed，宽度是根据浏览器窗口的宽度而不是其容器的宽度来测量的（尽管我将容器设置为position:relative).
问题是：如何将一列固定在窗口上，同时根据其容器而不是视口测量其宽度?
也许可以用 JS 来固定元素的位置？
PS我已经尝试过width: inherit解决方案，但这对我的情况没有任何帮助。
方法是使用第二个容器。我不知道你的确切代码，但这是一个例子。让我们假设你的结构是这样的：
<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;
}
Cheers.