Unable to scroll all the way to bottom of div

Question

I can't scroll all the way down to one of my DIVs. It happens only when I use my laptop. When I use my bigger screen everything works fine.

I have read that setting the height at 100% usually works but it does not for me.

here is a screenshot of the page https://postimg.org/image/j6kg868z3/

To provide a bit more context I am embedding this html on the body of a sharepoint page (i am branding sharepoint)and linking the css to the saved assets on our sharepoint server.

Here is the css:

@charset "utf-8";
#wrapper {
    position: absolute;
    overflow-y: scroll;
    max-width: 1414px !important;
    min-height: 100%;
    max-height: 100%;
}

Answer 1

max-height: calc(100vh - 120px) !important;

Try with this in your .wrapper class, you can also try with -100px or -80px, see what fits better for you, i had the same issue and by just decreasing that size on the max-height using calc worked great.

I know it's been a long time since you asked this, but i hope it helps anyway others

Answer 2

You'll want to switch to using vh units for your height measurement. Get rid of min-height and max-height, and just add height: 100vh; to the #wrapper. You'll also want to make sure that the #wrapper doesn't have a margin or any padding.

1vh is equal to 1% of the viewport window height. Learn more about CSS units here.

#wrapper {
  position: absolute;
  overflow-y: scroll;
  max-width: 1414px !important;
  color: white; /* Ignore */
  background: blue; /* Ignore */
  margin: 0;
  padding: 0;
  height: 100vh;
}

<div id="wrapper">Content</div>