如何用骨架CSS创建固定的侧边栏

几年前就有人问过这个问题，但没有可接受的答案。我想知道如果事情发生了变化，现在可以使用骨架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页面，可以用来解决这个问题。

我如何创建一个适当的，固定的侧栏骨架CSS行为正确的窗口大小的变化?

对Guy Dafnys回答的评论:

既然skeleton有一个"移动优先"的方法，我认为这样做会更好:

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

当显示宽度小于480时，可以使用"media query "来改变CSS的行为:

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

使用这种方式，它将相对于任何宽度小于480px，或固定在更高的分辨率

相关内容

最新更新

热门标签：