固定边栏与骨架响应布局 [英] Fixed sidebar with Skeleton responsive layout

问题描述

我有一个简单的两列响应设计与Skeleton样板。
对于边栏我有一个 div ： ： html prettyprint-override> < div class =container>
< div class =four columns>
/ *标志和菜单* /
< / div>
< div class =nine columns post>
/ * contents ... * /
< / div>
< / div>


我喜欢它在宽视口中的样子以及它如何堆叠在较窄的视口上，喜欢在更宽的大小中始终固定在左侧的侧栏（四列div ），同时滚动另一个 div 的内容。

尝试了几件事情，但它结束了响应的布局，我想我没有CSS的定位的彻底知识...

任何帮助是赞赏！
谢谢。

解决方案

我读到你使用的是Skeleton Boilerplate。

我建议您将标志和选单放在< nav> 元素中。关闭< / nav> 时，插入一个不间断的空格（& nbsp; ）。这个不间断的空间将有望解决您的问题！

 < div class =container 
< div class =four columns> 
< nav> 
 / *标志和菜单* / 
< / nav> 
& nbsp; 
< / div> 
< div class =nine columns post> 
 / * contents ... * / 
< / div> 
  

要转到您的CSS文件并插入：

  nav {position：fixed; width：220px; / *在Skeleton网站上找到了宽度信息* /} 
  

让我知道你！

I have a simple two column responsive design with Skeleton boilerplate. For the sidebar I have this div, inside a container div:

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

I like the way it looks in wide viewports and how it's stacked on narrower ones, but I'd like to have the sidebar (four columns div) in the wider sizes always fixed at the left, while scrolling the content of the other div.

Tried several things but it ends screwing up the responsive layout, I guess I don't have a thorough knowledge of CSS positioning...

Any help is appreciated! Thanks.

解决方案

I read that you are using the Skeleton Boilerplate.

I recommend that you put your logo and menu in a <nav>element. When closing </nav>, insert a non-breaking space ( ). This non-breaking space will hopefully fix your problem!

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

The next thing to do is to go to your CSS file and insert:

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

Let me know if it worked out for you!

这篇关于固定边栏与骨架响应布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！