CODEWITHSUNDEEP
javascripthtmlcss
fildred13
fildred13

Reputation: 2350

Set the scrollable height of an entire page regardless of content?

Is there a way using css and html to control the maximum scrollable height of a page, regardless of the content which is present on the page?

For a concrete, hypothetical example: say the <body> is incredibly simple - a <div> which is 5000px tall. How would you set the scrollable height to be only 2000px?

Thus it would appear that the 2000th pixel is the last pixel on the page. The browser's scroll bar would appear to be at the bottom, not just "stuck" halfway down the page. Am I missing something simple to achieve this behavior? I would prefer pure css/html because it seems like it should be doable, but I would accept js.

Upvotes: 0

Views: 152

Answers (3)

Josh Durham
Josh Durham

Reputation: 1662

Use max-height or height css properties and overflow:hidden on your container element. It will hide everything that is greater than the height you specify, therefore limiting the scrollbar height.

I should also mention that you can use overflow-y:hidden will achieve the same thing, but will only affect top and bottom edges of an element. See more details here.

Upvotes: 1

kei
kei

Reputation: 20491

You can do something like this

HTML

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

CSS

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

Upvotes: 1

Bwaxxlo
Bwaxxlo

Reputation: 1880

You should set the body height to a specific number and set overflow to hidden.

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

Made an example here

Upvotes: 1

Related Questions