Getting a tabular sidebar to go all the way down page

[ratherbcoding]

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.

https://css-tricks.com/forums/topic/changing-z-index-disables-links/#post-238306

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: http://codepen.io/ksefchik/pen/VeJoeM

[Shikkediel]

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…

[bearhead]

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?

so:

.sidebar p{
  position:relative;
  top:-10px;
}

[ratherbcoding]

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:

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.

http://codepen.io/ksefchik/pen/VeJoeM

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.

[bearhead]

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

http://codepen.io/kvana/pen/adeWzE

[ratherbcoding]

Thanks again, bearhead! You’re my savior!

[Author]

Posts