8

所以我正在创建一个网页，其中左侧的菜单是固定的（当您上下滚动页面时它们会跟随您）。我目前正在使用网格布局：Foundation (by 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>

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

4

3 回答 3

4

找到这篇文章 - ZURB + ScrollSpy。5分钟就搞定了。我发现将侧边栏内容包装在网格位置下方的 scrollspy div 中。

于 2012-11-20T17:16:42.963 回答
3

在我看来，如果您要拥有一个无论如何都已修复的页面组件，那么最简单的方法就是将其div完全从“基础”网格中拉出来。然后，在网格之外，您可以将其定位为fixed，它根本不会与网格交互。如果菜单本身也需要是一个灵活的网格，那就做一个——只是让它与主网格分开。

于 2012-03-21T08:57:09.850 回答
3

使用 javascript 来解决这样的问题似乎有点矫枉过正。我会尝试通过使用 Foundation 的偏移类来保持基础，如下所示：

<div class="row twelve columns">
  <div class="two columns" style="position:fixed;top:0;bottom:0;overflow-x:hidden;overflow-y:auto;">
    Menu
    <ul><li>Menu Item</li></ul>
  </div>
  <div class="ten columns offset-by-two">
    Content goes here
  </div>
</div>

希望这可以帮助！

于 2013-02-19T08:50:10.857 回答