在網格佈局框架中使用固定位置

因此，我正在創建一個網頁，其中左側的菜單是固定的（當您在頁面上下滾動時，它們會跟着您）。我目前使用的網格佈局：基金會（由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

在網格佈局框架中使用固定位置

回答

相關問題