Html 使用固定位置和栅格布局框架
因此,我正在创建一个网页,其中左侧的菜单是固定的(当您上下滚动页面时,它们会跟随您)。我目前使用的网格布局:基金会(ZURB)。它使用十二列网格。我在定位固定布局时遇到问题,同时仍在使用网格。如何在页面上使用网格布局和固定元素Html 使用固定位置和栅格布局框架,html,css,css-position,zurb-foundation,grid-layout,Html,Css,Css Position,Zurb Foundation,Grid Layout,因此,我正在创建一个网页,其中左侧的菜单是固定的(当您上下滚动页面时,它们会跟随您)。我目前使用的网格布局:基金会(ZURB)。它使用十二列网格。我在定位固定布局时遇到问题,同时仍在使用网格。如何在页面上使用网格布局和固定元素 <div class="container"> <div class="row"> <div class="four columns relativePosition"> <div
<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>
菜单在这里
其他内容
我能够使用这种结构获得工作的固定位置,但在某些情况下,菜单的内容变得太大,与八列的内容重叠。我不知道是否有更好的方法可以做到这一点?在我看来,如果你要修复页面的某个组件,最简单的方法就是将该
div
从“基础”网格中完全拉出。然后,在网格之外,您可以将其定位为fixed
,并且它根本不会与网格交互。如果菜单本身也需要是一个灵活的网格,那么让它成为一个与主网格分开的网格。找到本文-。在5分钟内完成。我发现将scrollspy div中的侧边栏内容包装在网格位置下方。使用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>
菜单
- 菜单项
内容在这里
希望这有帮助 这行不通。假设屏幕大小为1200px。页面宽度为1000px。如果将一个列类应用于一个固定元素,该元素的宽度为10%,那么该固定元素的宽度将为1200px=120px的
10%
。这是因为具有position:fixed
的元素的宽度是相对于视口而不是父div计算的。而任何非固定位置的物体都将获得1000px=100px的宽度10%
。