Question

这个问题被问到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>
        &nbsp;
      </section>
      <section id="content" class="nine columns">
        body content ...
      </section>
    </div>
  </body>
</html>

我在CSS中尝试了一些不同的方法来修复侧边栏（不滚动），但保持布局响应大小更改。最简单的是custom.css中的以下内容：

#sidebar {
  position: fixed;
}

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

这是一个jsfiddle page，可以解决这个问题。

如何使用Skeleton CSS创建一个适当的，固定的侧边栏，其行为与窗口大小的变化相符？

Answer 1

对Guy Dafnys的评论回答：

因为骨架有一个＆＃34;移动优先＆＃34;方法我认为这样做会更好：

#sidebar{
  position: relative;
}

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

Answer 2

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

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

#sidebar{
  position: fixed;
}

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

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

2 个答案: