这个问题是关于 a few years ago 的没有可接受的答案。我想知道情况是否发生了变化，现在可以使用 Skeleton CSS带有固定的响应式侧边栏。最好不需要 Javascript。
我的HTML如下:
<html>
<head>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body class="container">
<div class="row">
<section class="three columns">
<nav id="sidebar">
sidebar content ...
</nav>
</section>
<section id="content" class="nine columns">
body content ...
</section>
</div>
</body>
</html>
我在 CSS 中尝试了几种不同的方法来固定侧边栏(不滚动)，但保持布局响应大小变化。最简单的是 custom.css 中的以下内容:
#sidebar {
position: fixed;
}
这看起来是正确的，直到页面变得太窄，然后侧边栏和正文内容重叠，尽管他们应该做的是侧边栏会在正文内容之上。
这是一个jsfiddle page可以解决这个问题的人。
如何使用 Skeleton CSS 创建适当的、固定的侧边栏，使其能够正确响应窗口大小的变化？
最佳答案
对 Guy Dafny 回答的评论:
由于 Skeleton 采用“移动优先”方法，我认为这样做会更好:
#sidebar{
position: relative;
}
@media (min-width: 550px) { /*Skeletons default grid-activation width*/
#sidebar{
position: fixed;
max-width: 18%; /*Avoids overlapping*/
}
}
关于html - 如何使用 Skeleton CSS 创建固定侧边栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38068547/