固定定位面板中的内容区域不会滚动答案

【问题标题】：Content Area within Fixed Positioned Panel Won't Scroll固定定位面板中的内容区域不会滚动
【发布时间】：2013-06-28 22:02:06
【问题描述】：

Foreward: 在没有收到this 问题的回复并且对如何破解它没有更好的想法之后，我决定再次尝试我的布局刮。但是这个链接和这个注释真的只供你参考，并不一定会影响这个问题。

我正在构建一个网页，如果用户滚动到页面标题之外，该页面将成为“全屏”页面，其中有两个固定位置的工具栏，一个位于屏幕顶部，另一个位于屏幕顶部底部。底部栏“附加”到屏幕外内容区域（也就是说，它们都包装在容器div 中）。然后，当单击底部栏时，辅助内容面板将向上滑动到顶部工具栏下方并填充剩余的屏幕空间，向下到视口底部。

大部分工作都很好，但我还有最后一个问题。如果该次要内容区域中的内容超过屏幕的高度，它将被“剪裁”（但可能不是 CSS 意义上的）并且滚动条将不出现，即使容器 div 是给定样式overflow: auto。（如果改用overflow: scroll，滚动条当然会出现，但滚动仍然是不可能的）。我的标记是否存在阻止滚动的问题（可能是 HTML 问题，更可能是 CSS 问题，或者可能是某种疯狂的组合）？

作为一个测试用例，我将 jQuery UI “可调整大小”小部件添加到我的内容区域，然后能够成功获得一个工作滚动条。它唯一做的就是将类“ui-resizable”添加到内容容器中，样式为position: relative，但只是将其添加到标准.container.comment 并没有达到相同的效果。当然，我实际上并不希望这个内容区域可以调整大小，但它证明了这个概念至少在理论上是可行的。

货物：

底部的类层次结构（“评论”面板）：

.commentarea          <-- Section container
.commentbar           <-- Toolbar
.container.comments   <-- Container for the content area
   .content.comments  <-- The actual content area for this part of the page

【问题讨论】：

标签： css layout scroll css-position

【解决方案1】：

我不禁认为你过于复杂了。根据您的布局，您可能会选择this jsFiddle

对于 HTML，我们使用简单的 HTML5 标记：

<body>
    <div id="top-content">The content at the top</div>
    <div id="main">
        <header>Toolbar #1</header>
        <div id="posts">
            <p>Lots of repeated content</p>
        </div>
        <footer>Toolbar #2</footer>
    </div>
</body>

然后我们使用标准 div 来容纳#top-content，并为header 和footer 固定位置。为确保主要内容区域 #posts 不会被截断，我们为其设置了顶部和底部边距。

为了确保固定的header 不会与#top-content 重叠，我们应用了一些基本的 JavaScript 来根据窗口的顶部偏移量来设置它的偏移量。

$(window).scroll(setToolbarOffset);

function setToolbarOffset(){
    var top = $(document).scrollTop();
    var headerOffset = (top > 50) ? 0 : 50 - top;
    $("header").css("top", headerOffset);
}

setToolbarOffset();

如果固定高度有问题，您可以轻松确定高度并使用 jQuery/whatever 相应地调整 CSS。

如果您认为我没有理解您的观点，请随时插话。

【讨论】：

如果我只需要两个工具栏之间的一个内容区域，这是一个非常干净、很好的解决方案，但是问题是当第二个工具栏被点击时我确实需要第二个内容区域飞起来（参见页面，粗略的功能应该在那里）。我在构建它时考虑到了特定的类系统，部分是作为“存根”，以便在未来的某个地方向第二个内容区域添加“可拖动”属性的潜力。也就是说，我感谢您的努力，但仍然可能在某处使事情过于复杂（我很擅长这样做！:]）
@Devin 只是为了好玩，我为您更新了 jsFiddle (jsfiddle.net/pMH7U/7) - 两个内容区域可以轻松交互，您还可以根据工具栏是否切换添加动态边距。天空是极限，我相信你会明白的。实现您想要的事情的可能性太多，如果您将来遇到特定问题，请重新提出问题，我相信您会得到答复。
谢谢，看起来真的很棒！自从发布这篇文章以来，我自己已经取得了一些进展，所以我必须看看是否有可能在中间的某个地方见面（尽管可以等到星期一的这个时候！）