Left Sidebar and Main same height

Hi there,

can you share a link to your site where I can see the issue?

Hi David,

sorry its local testing. But its a default Theme with left sidebar configured, in which is the menu with submenus.

Hope that helps .

You could try this CSS:

#primary, #main, .inside-left-sidebar {
    min-height: 100%;
} 
#main, .inside-left-sidebar {
   background-color: #f00;
}

change the background-color: #f00; to match your sidebar and content.

Thx,

but that didnt work. The content didnt grow with the height. The color is no option because i want to have blocks.

Can you link us to the page in question?

Hi ying,

sorry its local for testing. But i use default Theme with left sidebar and a main menu in left sidebar and a second custom text block.

Are you using float or flexbox as the strcutre? Check customizer > general. if it’s float, change it to flexbox.

Let me know if this helps!

I do not have this option under customizer -> general. i only have Icon-Type and Underline Links.

Hi there,

It’s hard to assess the site, and why the provided custom code isn’t working without seeing the site live. Would you be able to host the site on a staging site so we can see the issue and help appropriately?

[quote]

Are you using float or flexbox as the strcutre? Check customizer > general. if it’s float, change it to flexbox.

[/quote]

Its flex, the container bevor which is over left sidebar and content has the class site-conten and the id=content. This style is display: flex.

Hope that helps.

Thanks for confirming it’s using flexbox. In this case, the CSS should work. However, there might be other CSS from plugins or other places interfere with it, we will have to see the site in question to determine what is the cause.

I got a testsite, see https://7i.se/V I hope that helps a lot.

What do you think?

• This reply was modified 1 year, 1 month ago by sunghost.

As you can see the left sidebar is the same length as the content area: https://app.screencast.com/7h1Thufwyz8Hi

However, do you want the last widget to extend its white space to fill the entire sidebar?

If so, try adding this CSS as well:

@media(min-width:769px){
.inside-left-sidebar .widget:last-child {
    flex-grow: 1;
    margin-bottom: 20px;
}

.separate-containers .inside-left-sidebar {
    display: flex;
    flex-direction: column;
}

div#left-sidebar {
    margin-bottom: 20px;
}
}

Hi,

oh sorry if described it the wrong way. Of course, the last widget should be the same height as the content. And that on every side and in the other way to, so if the sidebar is heigher than the content.

Does the CSS work?