CODEWITHSUNDEEP
htmlcsswordpress
megkification
megkification

Reputation: 1

How to make sidebar background stretch all the way down page

I'm trying to code up a site from scratch using my own theme, and so far I've been successful except for the sidebar. The sidebar is white, and I'm trying to make it extend all the way down to the bottom of the site, even if the post area is longer than it is.

I've tried stuff like position: absolute; bottom: 0; top: 0; height: 100%; min-height but nothing works! Right now, the code I have is:

#secondary {
       width: 19%;
       padding: 250px 30px 30px 30px;
       top: 0;
       margin-left: 13%;
       background-color: white;
       position: absolute;
}

Just for reference, here's the test site with a post that is longer than the sidebar. I want the white background to extend all the way down till the end of the post --

http://escapism.adriftonvulcan.com/index.php/2015/06/09/arc-review-the-summer-of-chasing-mermaids-by-sarah-ockler/

Any help will be much appreciated!

Upvotes: 0

Views: 3232

Answers (4)

Problem Child
Problem Child

Reputation: 585

You can try this Javascript. It worked for me.

$(document).ready(function(){
resizeDiv();
});

window.onresize = function(event) {
resizeDiv();
}

function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$(‘#secondary’).css({‘height': vph + ‘px’});
}

I got it off here. Worked one of my projects.

Upvotes: 0

Mitul
Mitul

Reputation: 3427

Hello in the example which you given is fixed sidebar layout here is the css for the side bar.

#secondary{
    position:fixed;
    top:0;
    left:0;
    width:200px;
    height:100%;
    display:table-cell;
    vertical-align: middle;
}

Upvotes: 0

m4n0
m4n0

Reputation: 32275

This is one of the solutions.

Include this jQuery code in footer:

<script>
  var height=$('#primary').height(); // Calculate primary wrapper height
  $('#secondary').height(height); // Set the height it to sidebar
</script>

Output: Full height sidebar

Upvotes: 1

NickLamp
NickLamp

Reputation: 862

Something like this should work

#sidebar {
    background-color: white;
    position:absolute;
    left:0;
    top:92px;
    bottom: 0;
    width:13%;
    }

This code styles a sidebar div that runs to the bottom of the page and when I run it it does that. I know you allude to it in your post but setting 

bottom : 0;

should work

Upvotes: 0

Related Questions