如何使用 Skeleton CSS 创建固定侧边栏？

Question

这个问题是关于 a few years ago with no acceptable answers. I would like to know if things have changed and it is now possible to use 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>
        &nbsp;
      </section>
      <section id="content" class="nine columns">
        body content ...
      </section>
    </div>
  </body>
</html>

我在 CSS 中尝试了几种不同的方法来固定侧边栏（不滚动），但保持布局响应大小变化。最简单的就是下面的custom.css：

#sidebar {
  position: fixed;
}

这看起来不错，直到页面变得太窄，然后侧边栏和正文内容重叠，尽管他们应该做的是侧边栏会在正文内容之上。

这里有一个 jsfiddle page 可以用来解决这个问题。

如何使用骨架 CSS 创建一个适当的、固定的侧边栏，使其能够正确地适应 window 尺寸变化？

Answer 1

当显示宽度小于 480 时，您可以使用“媒体查询来更改 CSS 的行为：

@media screen and (max-width: 480px) {
    #sidebar{
        position: relative;
    }
}

#sidebar{
  position: fixed;
}

这样使用它，如果宽度小于480px，或者固定在更高分辨率上，它将是相对的。

Answer 2

对 Guy Dafny 回答的评论：

由于 skeleton 有一个 "mobile first" 方法，我认为这样做会更好：

#sidebar{
  position: relative;
}

@media (min-width: 550px) { /*Skeletons default grid-activation width*/
  #sidebar{
    position: fixed;
    max-width: 18%; /*Avoids overlapping*/
  }
}

如何使用 Skeleton CSS 创建固定侧边栏？

How to create fixed sidebar with Skeleton CSS?

html

css

sidebar

skeleton-css-boilerplate