无论内容如何,​​设置整个页面的可滚动高度?

时间:2014-03-18 17:21:29

标签: javascript html css

有没有办法使用css和html来控制页面的最大可滚动高度,而不管页面上的内容是什么?

对于一个具体的,假设的例子:说<body>非常简单 - <div>高5000像素。如何将可滚动高度设置为仅2000px?

因此看起来第2000个像素是页面上的最后一个像素。浏览器的滚动条似乎位于底部,而不只是&#34;卡住&#34;在页面中间。我错过了一些简单的事情来实现这种行为吗?我更喜欢纯css / html,因为它似乎应该可行,但我会接受js。

3 个答案:

答案 0 :(得分:1)

您应将身高设置为特定数字,并将溢出设置为隐藏。

body{
  height:2000px;
  overflow:hidden;
}

制作example here

答案 1 :(得分:1)

在容器元素上使用max-heightheight css属性和overflow:hidden。它将隐藏大于您指定高度的所有内容,因此限制了滚动条的高度。

我还应该提一下,你可以使用overflow-y:hidden来实现相同的功能,但只会影响元素的顶部和底部边缘。查看更多详情here

答案 2 :(得分:1)

您可以执行this

之类的操作

<强> HTML

<div class="outer">
  <div class="inner">
     <!--your content here-->
  </div>
</div>

<强> CSS

.outer {
    height:2000px;
    overflow:auto;
}
.inner {
    height:5000px;
    overflow:hidden;
}