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

Question

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

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

这是我正在尝试做的事情：

Answer 1

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

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

然后在包装器中添加<div id="content"></div>例如您的内容并将其 css 位置属性设置为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

那么建议？分别创建三个块；用于固定导航、固定侧边栏（用于类别）和滚动主块（文章）。我想这很容易订购。

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

快乐编码！