Documentation Page scrolling bug

HTML-CSS
1

Hello,
I have created this page to solve the technical documentation page challenge using CSS grid.

The problem is that I cannot scroll throughout the entire page, as the last section does not appear in both columns. The page functions perfectly on my laptop (using chrome browser), but not on codepen.

I’ve created it, using sublime text.

Could anyone give me a hint?

2

make the window taller @Ibnalhaytham ?

3

You don’t need to set height for these 2 columns. And you need to make the container (body) to fit the screen height.

I tested and it works.
Here’s the fix:

body { 
    position: fixed;
    height: 100%;
}
/* Remove 700px height for both column */
section {
    overflow-y: auto;
    height: auto;
}
section .index {
    height: auto;
}
1 Like
4

Thank you not only for reading the code but also for the elegant solution.

But why have you set a position value of fixed for the body not relative?

5

Pay your attention to the height of the body.
If I get rid of position: fixed, the body’s height would be > 6000px (its natural height) and it won’t be scrollable

The idea was to have the body’s height fit to the browser screen height (e.g. my screen height is 650px).
When the body’s position is set to fixed, height: 100% will do the job to set its height to 650px (screen height).
With the child elements’ heights > body’s height, it’s now finally scrollable.