Forums

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

Home Forums CSS Stretching an Absolute Positioned Sidebar

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #195812
    robertallen
    Participant

    Hi all,

    I’m sorry I keep bugging so much, but I look all over the web and find solutions, and they don’t seem to work for me.

    I managed to stretch the sidebar’s background to match the content of the left side of the page (the articles)…however I noticed, if there aren’t as many articles in a category it only stretches to the height of whatever is on the left.

    I’ve tried height: 100% on html, body…as well as all the div elements inside the wrapper and <aside> but I still didn’t achieve my goal. I wonder if it’s because the sidebar is abolutely positioned.

    Also, how come a browser scrollbar hides under a fixed header?

    You can see my problem here:

    http://billrice.staging.wpengine.com/category/writing/

    #195813
    shaneisme
    Participant

    The height: 100% needs to go all the way down.

    So add it to #wrapper and you’re set.

    #195814
    shaneisme
    Participant

    I should add that will not help when content will go below the fold.

    Check out sticky footers in your searches, that would probably help you wrap your head around it.

    https://css-tricks.com/snippets/css/sticky-footer/

    Also you can read up on flexbox which has this baked in.

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    #195815
    robertallen
    Participant

    Oh, thank you. I tried that, however there’s a scrollbar that’s happening.

    Could it be because I’m moving the sidebar down so many pixels?

    #195817
    shaneisme
    Participant

    No you’re probably dealing with a margin or padding somewhere.

    You should be able to find that in devtools.

    If you can’t find it let us know.

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