The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Getting a tabular sidebar to go all the way down page

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #238308

    I’m part of the way there! Someone was able to help me with my last problem, now I’m on the last part of my page that I don’t know how to fix.

    In the above link, an incredibly helpful user suggested using absolute instead of relative positioning. Now I’m having a different issue.

    I’ve got this sidebar on it that is mostly in position. but when I move it off the bottom of the page (a necessary step to render the page correctly), a gap is exposed between the bottom of the sidebar. How can I make it fill in that gap?

    Here is a pen demonstrating my problem:


    I’m not getting it – the gap is created by moving the element “off the bottom” in the first place. I must be missing the point here.

    Why would you disable all html pointer events by the way? Doesn’t really help with debugging to have to figure that out first…


    The gap is there because .sidebar is positioned 10 pixels up (top:-10px). Maybe you could try removing that -10px from the sidebar, and instead apply it to the content within the sidebar?


    .sidebar p{

    First off, thanks for posting back so quickly! You all are the best!

    Second, I didn’t move up the sidebar for no reason. I have to apologize here, as my original post may not have been incomplete. Check this image out for some clarity:

    My Header Bar with trim

    The design calls for a sidebar that appears to sit underneath some trim that runs along the page header bar. I have added a transparent trim to the CodePen so you can see its dimensions.

    Basically, what I need is for the sidebar to BOTH sit underneath that top-trim AND extend to the bottom of the page.

    Finally, to answer I had the pointer events code in there from before when I was troubleshooting some z-index issues. I’ve removed it from the pen as it wasn’t necessary.


    Try positioning the top trim relatively and setting its height to the height of the nav (60px) you won’t need margin-top either.

    Then you can remove the top:-10px on the sidebar

    Lastly you’ll need to add padding-top to the sidebar and main-content, so that their content isn’t under the trim


    Thanks again, bearhead! You’re my savior!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.