Suffusion Theme – Height of Sidebar

Gary Eckstein WordPress 1 , ,

Use CSS to change the WordPress sidebar heightI’m not going to mention (yet again) what a fan I am of the WordPress Suffusion Theme. This WordPress Site uses Suffusion and I install customized versions of the theme for many of my customers. There are so many configuration options available with Suffusion however occasionally there is a bit of CSS amendment necessary (when changing CSS remember to always create a Child Theme first so that amendments aren’t lost with any Theme upgrade).

Sidebar Height = 100% Page Height …. How?

Recently I was creating a Suffusion themed Site where a right sidebar was required and the sidebar was a different colour to the body. It is simple enough to flatten the sidebars and remove any top and bottom margins using CSS (see example CSS below) however I just couldn’t figure out how to make the sidebar height the same as the height of the Page. I tried practically everything!

#sidebar.flattened, #sidebar-b.flattened {
margin-top: 0;
margin-bottom: 0;
}

Suffusion Sidebar Height CSS

Fortunately I found the solution on the Suffusion forum so decided to repost the CSS here in case others are also battling to find a solution.

Here then is how to make the height of your sidebar the same height as your Page:

#container {
    overflow: hidden;
}
#page #wrapper #container #main-col {
    margin-bottom: -20000px;
    padding-bottom: 20010px;
}
#sidebar.right {
    margin-bottom: -20000px;
    padding-bottom: 20010px;
}