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

Question

所以我正在创建一个网页，左边的菜单是固定的（当你上下滚动页面时，它们会跟着你）。我目前正在使用网格布局：基础（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>

使用这种结构，我可以获得固定的位置，但在某些情况下，菜单的内容变得太大，并与八列的内容重叠。我不知道是否有更好的方法？

Answer 1

使用javascript来解决这样的问题似乎有些过头了。我会尽量通过使用基金会的偏移类来保持基础，比如：

<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>

希望这能有所帮助！

Answer 2

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

Answer 3

使用：

position: sticky;
top: 0;

集装箱里对我有用。

本文详细介绍了它：使用CSS网格的位置粘贴。（我也把它保存在Wayback Machine上。）