Question

前瞻： 在收到this问题没有回应并且没有更好的想法如何破解它的工作后，我决定只是从头开始重新尝试我的布局。但链接和本说明仅供您参考，它们不一定会影响这个问题。

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

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

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

商品：

有问题的网址：http://weathersourcepa.com/iProj/newsticky/stickies2.html

底部的类层次结构（“注释”面板）：

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

Answer 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 /调整CSS。

如果你认为我错过了你的观点，请随意加入。

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

1 个答案: