html - 是否可以限制/调整浏览器页面的滚动高度?

标签 html css scroll

我的 csspp library and tool 有一个页面使用固定的页眉和页脚。当浏览器宽度至少为 1,​​300 像素时,这些问题是固定的。

我遇到的问题是,当这些对象被修复时,它会改变用户可以看到的区域的大小。但是,当您使用 Page Up 和 Page Down 时,不会考虑这些固定对象(至少默认情况下不会)。换句话说,当您执行 Page Down 操作时,浏览器不会在可见区域中看到下一页,而是向下滚动整页。我希望能够告诉浏览器滚动可见数据的高度(即下图中箭头的长度)。 Page Up 也有同样的问题。如果从页面底部开始向上一页,您将错过大约等于页眉 + 页脚高度的数据。

我的问题是:是否可以使用 CSS 3 和/或 HTML 5 来解决此滚动高度问题?

我已经看到在各种网站上工作,例如wired.com(他们有固定的标题),但他们使用了大量的JavaScript,所以我认为他们破解了JavaScript中的滚动...

enter image description here

最佳答案

是的!

<div class="header">
</div>
<div class="content">
...
</div>
<div class="footer">
</div>

还有

.header {
    height: 35px;
}
.content {
    overflow-y: scroll;
    position: absolute;
    top: 35px;
    bottom: 35px;
}
.footer {
    bottom: 0;
    position: absolute;
    height: 35px;
    width: 100%;
}

http://jsfiddle.net/p3Lk0Lam/2/

关于html - 是否可以限制/调整浏览器页面的滚动高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31257432/

相关文章:

html - 显示 :inline-block elements 上的神秘负边距

html - 对齐并行有序列表

javascript - 使用循环生成表行时自动将行和列数据添加在一起

html - 谷歌地图信息窗口高度不起作用

css - 为什么我的伪元素出现在一个 HTML 演示中,但没有出现在我的 Angular 5 应用程序中?

html - 为什么在附加到我的标签的 CSS 类中设置宽度不会改变它们的宽度?

jquery - 一次 CSS 动画图像

css - 在 iframe 或 div 中滚动

javascript - 在滚动时触发 SVG 动画

android - 在 Robotium 中快速滚动