Problem creating a Table of Contents (with "infinite" height) using HTML/CSS

pmqa 0
Viewed 27

Basically I want to have two sections with completely independent scrolls:

  • A TOC (generated with JS using H1,H2,H3 from the content)
  • Content (text and images)

Here's the CSS:

#post-content {
  width: 70%;
  margin-left: 30%;
}
#toc {
  width: 30%;
  position: fixed;
  height: 600px; // this would probably be calculated using the viewport
  overflow: scroll;
}

I already have the basic HTML/CSS/JS at this CodePen but I'm unable for some reason to have the TOC scroll to the bottom. Meaning, there are more UL/LI's but they aren't shown.

I'm pretty sure I'm failing at the CSS but I can't get it right.

Any help, please?

Thanks!

jquery javascript css html
2 Answers

Change the style for #toc to this:

#toc {
    width: 30%;
    position: fixed;
    height: 100vh;     /* <---- Changed */
    overflow: scroll;
    top: 0;            /* <---- Added   */
}

Or if you do not want to show the horizontal scrollbar, adjust top as follows

#toc {
    width: 30%;
    position: fixed;
    height: 100vh;     /* <---- Changed */
    overflow: scroll;
    top: 12px;         /* <---- Added   */
}
Frank Fajardo0

I think you may be close. This is working for me on my large screen but if I reduce the height of the window I run in to issues.

If the height of the window is less than 600px high (the height you've set) then you won't get to see the bottom of the scrollable toc. Try adding max-height: 100vh and see if that makes a difference.

That way you set a height of 600px but if the window is shorter, you set the maximum height to the height of the window instead.

Andrew Milne0
Related