[Resolved] Extend sidebar height when separate containers are used

[jhmattern]

Hi. I’ve nearly finished moving one of my sites over to GeneratePress, but I’m stuck on one last tweak.

In order to get the dividing lines I wanted to maintain between the sidebar, header, and content, I ended up having to use separate containers (and hiding the spacers between posts and widgets via CSS).

The issue is the sidebar stops after the last widget, and the site background / spacer color is displayed there as a big open gray block that cuts into the main area of the page.

A) Is it possible to force the sidebar to a 100% height somehow so it will maintain the sidebar’s intended white background?

B) If not, what would be the best way to retain the current spacer lines between the header/content and content/sidebar?

Thanks!

[David]

Hi there,

try this CSS:

@media (min-width: 769px) {
    .site-content {
        display: flex;
    }
    #right-sidebar {
        min-height: 100% !important;
        background-color: #fff;
        margin-top:2px;
    }
}

[jhmattern]

Perfect. Thank you so much! Another site down. Couldn’t be happier getting them moved over to GeneratePress. 🙂

[David]

Awesome – so glad to hear the ‘move’ is going well 🙂

[jhmattern]

This fix appears to have stopped working. You can see an example at https://freelancewritingpros.com/unadvertised-freelance-writing-jobs/ where the divider no longer extends to the bottom of the page. It cuts off after the sidebar content again.

Any updates that would get this working again? The CSS you shared previously is still in the “additional css” section of the customize area where it was working before.

Thanks!

[David]

How odd … i made a slight change to the CSS here

Just the height property became min-height

[jhmattern]

That did it! Thank you!

[David]

Awesome – glad to be of help

[Author]

Posts