Sidebar Problems

[Jedediah White]

Hello all! I’m developing a website for a medical supply company and they wanted their products to list along the side of all pages of the website. I have tried my best to set it up so that it stays the length of the page, but sometimes it just suddenly ends and the content spills over to where the sidebar should be continuing.

Here’s an example of where I’m having this problem: http://kiequiposmedicos.com/en/productos/

What I’m using to try and keep the sidebar the full length of the page is the following jQuery:

<script>
// Resize sidebar //
$(function(){
var H = $("#container").height();
var K = 0; //Added zero as my previous number was not working
$("#sidebar").height(H-K);
});
</script>

It is working, but not always adding the correct height. Basically, it looks at the container of the page and tries to mimic it’s height so the sidebar matches (by adjusting the sidebar’s CSS height value). Any fixes or ideas are welcome. And since this website is built on WordPress, maybe you have a PHP answer (?). By the way, this problem seems to be worse when viewing the site on an iPad. Thanks in advance!

[Chromawoods]

Without knowing, I would suspect that flex-box would solve that problem, but that solution might not be all good depending on which browsers you need to support.

However, there is an ol’ CSS hack for making a column fill the entire height. Might be a solution for you. See this pen:

http://codepen.io/chromawoods/pen/fodaF/

Notice the huge padding and negative margin on the sidebar, along with overflow-y: hidden on the containing element. That’s basically it.

[Author]

Posts