所以我正在创建一个网页,其中左侧的菜单是固定的(当您上下滚动页面时它们会跟随您)。我目前正在使用网格布局:Foundation(by zurb)http://foundation.zurb.com/docs/grid.php 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>
我能够使用这种结构获得固定位置来工作,但在某些情况下,菜单的内容变得太大并且与八列的内容重叠。我不知道是否有更好的方法来做到这一点?
使用 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>
希望这可以帮助!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)