我已经成功地使用了漂亮的Susy 网格系统来创建一个类似于 WebDesignerWall.com 的响应式布局：
我未能实现的是position:fixed侧边栏。
当页面滚动并停留在同一位置时，这样的侧边栏不会滚动。这非常方便（无论如何，您实际上不能将更多内容放入侧边栏中，因为它会使页面顶部在一个狭窄的窗口中变得混乱）。
每当我应用于position:fixed列时，我的布局都会变得疯狂：
彩色块被声明为三列宽，但在position:fixed应用于侧边栏时会进一步拉伸..
我认为问题在于侧边栏的宽度是相对的，即以百分比设置。由于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;
}
干杯。
也许可以用 JS 固定元素的位置？
是的，但这会很乏味并且不是理想的解决方案。
相反，使用 JavaScript 计算适当的宽度并分配它，而不是直接在 CSS 中使用百分比。这是一个基本的大纲：
function updateSize() {
var outer = document.getElementById("outercontainer"); //get the container that contains your sidebar
var navcol = document.getElementById("navcol"); //get the sidebar (which is supposed to have position: fixed;)
navcol.style.width = Math.floor(outer.offsetWidth * 45/100) + "px"; //or whatever your percentage is
}
updateSize();
window.onresize = updateSize; /*make sure to update width when the window is resized*/
注意：上面使用的 ID 只是占位符——您需要修改它们以适合您的实际页面。
你不能，固定位置的元素从它们的容器中分离出来，position: relative或者没有position: relative. 只需将其宽度设置为绝对值 - 看起来您的内容总是 760 像素宽，对吧？
position:fixed像position:absolute这样工作，它没有相对于它的容器定位。它只是浮动到您的文档中。快速修复将是这样的：
<div id="fixed-element" style="width:30%"> /* 30% of the document width*/
lorem ipsum dolor sit amet
</div>
<div id="faux-sidebar" style="width:30%; display:block"> /* 30% of the document, leave it empty, so it acts like a placeholder for the fixed element*/
</div>
<div id="the-rest" style="width:70%"> /* the rest of the website goes here */
more lorem ipsum than ever before
</div>
为什么不直接用数学？=)
示例 html：
<div class="container">
<div class="col">
<div class="fixed">This is fixed</div>
</div>
</div>
CSS
.container {
width: 80%;
margin: 0 auto;
}
.col {
float: left;
width: 33.3333333333%;
}
.fixed {
position: fixed;
width: 26.666666666%; /* .container width x .col width*/
}