css - 具有骨架响应式布局的固定侧边栏

Question

我有一个简单的两列响应式设计，带有骨架样板。 对于侧边栏，我有这个 div，位于 容器 div 内:

 <div class="container">
    <div class="four columns">
       /* logo and menu */
    </div>
    <div class="nine columns post">
       /* contents... */
    </div>
 </div>

我喜欢它在宽视口(viewport)中的外观以及它在较窄视口(viewport)中的堆叠方式，但我希望将较宽尺寸的侧边栏(四列 div)始终固定在左侧，同时滚动另一个 div 的内容。

尝试了几件事，但最终搞砸了响应式布局，我想我对 CSS 定位没有透彻的了解...

感谢任何帮助! 谢谢。

Answer 1

我了解到您正在使用骨架样板。

我建议您将 Logo 和菜单放在 <nav> 中元素。关闭时</nav> ，插入不间断空格 (   )。这个不间断的空间有望解决您的问题!

 <div class="container">
    <div class="four columns">
       <nav>
       /* logo and menu */
       </nav>
       &nbsp;
    </div>
    <div class="nine columns post">
    /* contents... */
    </div>

接下来要做的就是转到 CSS 文件并插入:

nav{ position:fixed; width:220px; /*found the width-info on Skeleton website*/ }

让我知道它是否适合您!