html - 如何设置右侧容器在它自己的位置滚动

Question

所以这是我网站的链接。我想要正确的容器滚动到位。我怎样才能做到这一点？我尝试添加position: fixed到右列，但随后破坏了布局。现在溢出总是一直滚动到顶部。基本上我想insta-shop-grid在容器本身内滚动。

score 1 · Accepted Answer

添加z-index: -1到主要内容，防止它在横幅上方滚动。

请参阅简化的 JSFiddle。

更新：

从@Anobik 窃取，我修改了我的示例，删除z-index并在主要内容周围添加了一个fixed包装器

HTML：

<div class="banner">Banner</div>
<div class="nav">Navigation</div>
<div class="container">
    <div class="content">Main content</div>
</div>

CSS：

.container {
    position: fixed;
    top: 60px;
    left: 125px;
    width: 75%;
    height: 400px;
    overflow: scroll;
}

score 1 · Accepted Answer

我将其编辑为内联样式

看看它是否有效。将它们添加到一个类中。

<div class="directory-container container" style="
max-height: 400px;
z-index: 1111111;
overflow: scroll;width: 100%;
margin-top: 361px;

">

并添加<body style="overflow:none">

但是网站确实需要一些响应式设计。我使用 400px 和 360 作为边距，因为填充已经存在。:) 我仍然希望这会奏效

2 回答 2