如何混合滚动和固定元素？

Question

我希望修复许多元素，但然后让主文本块滚动。

在开始编码之前，我想就最好的方法做一些建议。我应该将所有固定元素包装在一起，然后在其中包含滚动部分的相对元素吗？

提前致谢。这是我尝试做的快速而肮脏的模型：

Answer 1

我认为你应该为你的页面创建一个主包装器，它具有相对位置，并且你在页面上水平居中（例如，使用margin: 0 auto;）。

然后在该封装内添加<nav>作为顶部导航，并将其css position属性设置为fixed，然后对带有<aside>的侧边栏执行相同操作。

然后在包装器中添加<div id="content"></div>作为内容的例子，并将其css position属性设置为relative。如果您希望此div的内容垂直滚动，可以添加以下css：overflow: auto;

Answer 2

如果我理解你，你希望你的内容能够在不重新加载页面的情况下进行更改。内容滚动，但不滚动。

你可以：

1. 将您的内容整理到iframe，这样您就可以更改内容而无需使用固定的height刷新整个页面，

2. 只需对内容div使用固定高度，然后设置：

   #yourDivId{
       overflow:scroll;
       overflow-y:none;
       height: XXX px;    //Fixed height;
   }
   

   注意：您的鼠标必须悬停内容才能滚动。

Answer 3

好的建议？ 分别创建三个块;用于固定导航，固定侧边栏（用于类别）和滚动主要块（文章）。我想，它很容易订购。

固定侧边栏上会显示多少个类别？如果列表比窗口屏幕更高，则某些类别将被隐藏，除非您将其设置为溢出：auto＆＃39;。还要考虑用户调整屏幕大小的可能性。

快乐的编码！