Question

我有一个简单的两列响应式设计，带有Skeleton样板。对于侧边栏，我在容器div 中有 div ：

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

我喜欢它在宽视口中看起来的样子以及它如何堆叠在较窄的视口上，但是我想让更宽尺寸的侧边栏（四列div ）始终固定在左边，同时滚动其他 div 的内容。

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

任何帮助表示赞赏！感谢。

Answer 1

我读到你正在使用Skeleton Boilerplate。

我建议您将徽标和菜单放在<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*/ }

让我知道它是否适合您！

Answer 2

为此你需要一个“粘性”div

尝试使用waypoints

修复了带有Skeleton响应式布局的侧边栏

2 个答案: