使用固定位置与网格布局框架

Question

所以我正在创建一个网页,左侧的菜单是固定的(当您向上和向下滚动页面时,它们会跟随您).我目前正在使用网格布局:基础(由zurb)http://foundation.zurb.com/docs/grid.php.它使用十二列网格.我在定位固定布局和仍然同时使用网格时遇到问题.如何在页面上使用网格布局和固定元素？

<div class="container">
   <div class="row">
        <div class="four columns relativePosition">
              <div class="fixedPosition">
                   <div class="four columns">
                        Menu Here
                   </div>
              </div>
        </div>
        <div class="eight columns">
              Other Content
        </div>
   </div>
</div>

我能够使用这种结构使固定位置工作,但在某些情况下,菜单的内容变得太大并且与八列的内容重叠.我不知道是否有更好的方法来做到这一点？

Answer 1

在我看来，如果您想要修复页面的某个组件，那么最简单的方法就是将其div完全从“基础”网格中取出。然后，在网格之外，您可以将其定位为fixed并且它根本不会与网格交互。如果菜单本身也需要是一个灵活的网格，则将其设为\xe2\x80\x94即可，使其与主网格分开即可。

\n