How to create fixed sidebar with Skeleton CSS?
<p>This question was asked about <a href="https://stackoverflow.com/questions/13190320/fixed-sidebar-with-skeleton-responsive-layout">a few years ago</a> with no acceptable answers. I would like to know if things have changed and it is now possible to use <a href="http://getskeleton.com" rel="nofollow noreferrer">Skeleton CSS</a> with a fixed, responsive sidebar. Preferably without the need for Javascript.</p>

<p>My HTML is as follows:</p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" href="css/normalize.css"&gt;
    &lt;link rel="stylesheet" href="css/skeleton.css"&gt;
    &lt;link rel="stylesheet" href="css/custom.css"&gt;
  &lt;/head&gt;
  &lt;body class="container"&gt;
    &lt;div class="row"&gt;
      &lt;section class="three columns"&gt;
        &lt;nav id="sidebar"&gt;
          sidebar content ...
        &lt;/nav&gt;
        &amp;nbsp;
      &lt;/section&gt;
      &lt;section id="content" class="nine columns"&gt;
        body content ...
      &lt;/section&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I've tried a few different ways in CSS to make the sidebar fixed (doesn't scroll), but keeping the layout responsive to size changes. The simplest is the following in <code>custom.css</code>:</p>

<pre><code>#sidebar {
  position: fixed;
}
</code></pre>

<p>This looks right until the page becomes too narrow, and then the sidebar and body content overlap although what they should do instead is the sidebar would be above the body content. </p>

<p>Here is a <a href="https://jsfiddle.net/27wmryqk/2/" rel="nofollow noreferrer">jsfiddle page</a> that one can play with for this problem. </p>

<p>How do I create a proper, fixed sidebar with Skeleton CSS that behaves properly to window size changes?</p>