我已经成功地使用了美丽的
Susy grid system来创建一个与
WebDesignerWall.com:
类似的响应式布局
类似的响应式布局
我未能实现的是一个位置：固定边栏.
当页面滚动并保持在同一位置时,这样的侧边栏不会滚动.这非常方便(无论如何,你实际上不能将更多内容放入侧边栏,因为它会在一个狭窄的窗口中混乱页面顶部).
每当我申请职位时,我的布局都会变得疯狂：固定到一列：
彩色块被声明为三列宽,但当position：fixed应用于侧边栏时会进一步伸展.
我认为问题在于侧边栏的宽度是相对的,i.即以百分比设置.由于position：fixed,宽度是根据浏览器窗口的宽度而不是其容器来测量的(尽管我将容器设置为position：relative).
问题是：如何在对其容器而不是视口测量其宽度的同时将列固定到窗口？
也许用JS来修复元素的位置是可能的？
PS我已经尝试了width: inherit solution,但它对我的情况没有任何帮助.
解决方法
这样做的方法是使用第二个容器.我不知道你的确切代码,但这是一个例子.我们假设您的结构是这样的：
<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;
}
干杯.
