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

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

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

来源

2012-02-29 Adim

找到本文 - ZURB + ScrollSpy。得到它在5分钟内工作。我发现将边栏内容封装在网格位置下方的Scrollspy div中。

来源

2012-11-20 17:16:42 cosmicdot

对我来说，如果你打算让页面的一个组件固定，最简单的方法就是将div从“基础”网格中抽出。然后，在网格外部，您可以将其定位为fixed，它根本不会与网格交互。如果菜单本身也需要成为一个灵活的网格，那就把它做成一个 - 只要把它与主网格分开即可。

来源

2012-03-21 08:57:09 Ian128K

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

希望这会有所帮助！

来源

2013-02-19 08:50:10 Marz

这不起作用。假设屏幕尺寸是1200px。页面宽度是1000px。如果你将一个列类应用于固定的元素，例如10％的宽度，那么固定元素的宽度将为'1200px = 120px'的10％。这是因为具有'position：fixed'的元素的宽度是相对于视口计算的，而不是父div。而任何不固定的位置将获得1000px = 100px的10％的宽度。 – 2013-04-18 10:21:08

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

回答

相关问题