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

时间:2015-07-06 23:35:23

标签: html css scroll

我的csspp library and tool页面使用了固定的页眉和页脚。当浏览器的宽度至少为1,300px时,这些是固定的。

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

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

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

enter image description here

2 个答案:

答案 0 :(得分:4)

是!

<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/

答案 1 :(得分:0)

<强> UPD2

如果您的内容包装器中没有滚动条而不是页面中的滚动条,那么您可以将CSVFormat format = CSVFormat.DEFAULT; FileWriter fw = new FileWriter("Temp.csv"); CSVPrinter printer = new CSVPrinter(fw, format); String[] temp = new String[4]; for(int i=0; i<4; i++) { if(i==1) temp[0] = "#"; else temp[0] = ""; temp[1] = "hello" + (i+1); temp[2] = ""; temp[3] = "test"; Object[] temp1 = temp[] printer.printRecord(temp1); } fw.close(); printer.close(); 设置为内容包装器,并使用overflow: scroll或以某种方式设置适当的高度。< / p>