Blog sidebar css help needed

[theoofoof]

Hi guys. 

I'm very new to CSS and wondered if you could help me. For my site: philipglenisterfans.org.uk I managed to change the width and background to my blog side bar using the following code: 

/* Blog sidebar
------------------------------------------------------------*/
.blog-sidebar {
width: 275px;
padding-left:30px
}

.column-blog {
float: right;
width: 275px;
margin: 0 0 auto 50;
padding: 0;
background: #000000;
}

But because depending on what blog post are there, the height of the page changes the sidebar is too short and theres a big ugly white gap at the bottom like so:

So my question is, is there a way to set a height for the sidebar? Or make it responsive to the height of the page? Or am I just going to have to bite the bullet and reduce the number of blog posts shown?

[Adam7]

While we don't provide CSS assistance ourselves, I did find this solution from a quick Google search:

https://stackoverflow.com/questions/23389098/fill-remaining-vertical-space-only-css

Seems like you'll need to make a couple CSS tweaks to the sidebar and its parent container.

[DXC]

@theoofoof,

You mentioned that you are very new to CSS, so I'm not sure how much luck you are going to have with this. To make things easier for you I went ahead and mocked up a potential solution to your problem. Essentially, the box that all of the posts are inside of (content) is set to be one color. The box containing everything (main) is set to be the same color as the sidebar. I am happy to answer any questions that you have about this, as I'm sure it may seem more complicated than it actually is.

See my solution on CodePen

Coding is fun. Never let obstacles discourage you. There is usually always a way to do something!