CODEWITHSUNDEEP
htmlcssscrollbarcss-positionoverflow
Daniele B
Daniele B

Reputation: 20412

HTML/CSS: How to prevent DIV scrollbar going off screen?

It seems there are a few StackOverflow posts about this issue, but I still cannot fix the problem.

So, I am providing the very exact HTML/CSS: https://jsfiddle.net/dbaroncelli/r08qfcv2/2/

enter image description here

As you can see, the scrollbar is shown in its own length when it's at the top.

But when you scroll to the bottom, part of the scrollbar gets hidden, as well as the bottom part of the text.

How can you solve this issue, so that the bottom of the text doesn't get hidden?

This is the CSS, which you also find in the Fiddle link above:

body {
  box-sizing: border-box;
  position: fixed;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.topdiv {
  background-color: #FF0000;
}

.scrolldiv {
  overflow-y: scroll;
  height: 100%;
  width: 100%;
}

Upvotes: 0

Views: 3024

Answers (1)

Richard Hunter
Richard Hunter

Reputation: 2180

There are lots of solutions, but the best one is probably to use CSS Grid, though do check if your target browser supports it (IE is the only problematic one these days really).

The CSS should look something like this:

body {
  box-sizing: border-box;
  position: fixed;
  padding: 0px;
  margin: 0px;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  display: grid;
  grid-template-rows: auto 1fr;
}

.topdiv {
  background-color: #FF0000;
}

.scrolldiv {
  overflow-y: scroll;
  background: yellow;
}

I've offset the borders of the body just to make clearer the position of the elements.The key line is probably grid-template-rows: auto 1fr; This means that the grid consists of two rows. The first row contains your red header. auto means that the height will adjust automatically for the contents of this. 1fr means that the second row will take up the remainder of the height of the grid.

here is a working JSFiddle.

Upvotes: 2

Related Questions