Using fixed position with a grid layout framework

问题

So I am creating a web page, where the menus on the left hand side are fixed (They follow you when you scroll up and down the page). I am currently using The Grid layout: Foundation (by zurb) http://foundation.zurb.com/docs/grid.php. Which uses a twelve column grid. I am having problems positioning the fixed layout and still using the grid at the same time. How can I use a grid layout and fixed elements on a page?

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

I was able to get the fixed position to work using this structure but in some cases the contents of the menu grows too big and overlap the contents of the eight column. I dont know if there is a better way to doing this?

回答1:

Found this article - ZURB + ScrollSpy. Got it working in 5 mins. What I found that wrapping the sidebar content in scrollspy div underneath the grid position.

回答2:

Using javascript to solve a problem like this seems like overkill. I would try to keep to the basics by using Foundation's offset classes like this:

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

Hope this helps!

回答3:

Seems to me that if you're going to have a component of the page that's fixed anyway, the easiest thing to do is just pull that div out of the 'Foundation' grid altogether. Then, outside of the grid, you can position it as fixed and it won't interact with the grid at all. If the menu itself also needs to be a flexible grid, make it one—just make it separate from the main grid.

来源：https://stackoverflow.com/questions/9492045/using-fixed-position-with-a-grid-layout-framework

标签

html

css

css-position

zurb-foundation

grid-layout