0

前言：在没有得到这个问题的回应并且对如何破解它没有更好的想法之后，我决定从头开始再次尝试我的布局。但是这个链接和这个注释真的只供你参考，它们并不一定会影响这个问题。

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

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

作为一个测试用例，我将 jQuery UI “可调整大小”小部件添加到我的内容区域，然后能够成功获得一个工作滚动条。它所做的唯一一件事就是将“ui-resizable”类添加到内容容器中，并带有 style 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
4

1 回答 1

1

我不禁认为你过于复杂了。根据您的布局，您可能会摆脱这个 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固定位置。为了确保主要内容区域不会被截断，我们为其设置了顶部和底部边距。headerfooter#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。

如果您认为我错过了您的观点，请随时插话。

于 2013-06-28T23:45:57.547 回答