How to make sidebar height equal to window's height?

Question

I'm creating a WordPress Twenty Fifteen child theme to move its left sidebar to right side.

My child theme sidebar's height is not equal to window's height like the original theme.

This is my sidebar CSS:

.sidebar {
float: right;
margin-right: 0px;
max-width: 413px;
position: relative !important;
width: 29.4118%;
background: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

I have tried height:100%; and height:auto; but it still not working.

How to fix this issue?

Your height is not working probably because the container doesn't have a set height either. — Waxi, Jan 27 '15 at 21:39
When user scroll, I want the sidebar scrollable with full height white background. @j_s_stack — Zulhilmi Zainudin, Jan 27 '15 at 21:40
You need to post more code. We need to see the HTML structure and relevant CSS. In the meantime, try: `height:100vh` — Waxi, Jan 27 '15 at 21:48

score 1 · Answer 1 · edited May 23 '17 at 10:30

You can use css3 viewport-percentages.

For example, setting height equal to: height:100vh;, will make your div equal to 100% of the height of the view port.

You can read more about it here:

Make div 100% height of browser window

or have a look at this fiddle I put together here. fiddle

Note that CSS3 vh is not supported by older browsers, so you may be better off accomplishing this with jQuery or javascript.

score 1 · Answer 2 · answered Jan 27 '15 at 22:53

1

jQuery would be your best bet.

$(window).scroll(function() {
    var windowHeight = $(window).height();
    $(".sidebar").css("height", windowHeight);
});

The scroll function will resize the sidebar if the browser size changes.

answered Jan 27 '15 at 22:53

James George Dunn

523
1
6
16

score 0 · Answer 3 · answered Jan 27 '15 at 22:37

If you want it to be fixed (always there, like in the original theme) then you can set it to position: fixed with a top: 0, bottom: 0 and a proper left/right settings (or width).

If you want it to stay at the top and not stick to the viewport, then you could place it in position: absolute with a top: 0, bottom: 0 and proper left/right, etc.

score 0 · Answer 4 · answered Nov 17 '15 at 17:23

I had the same problem. The solution I used, after looking at the styles used on http://materializecss.com/collections.html - the side navigation is similar to what I am attempting to make - I found that this worked for me:

height: calc(100% + 2em);

Well.. more precisely, THIS worked for me:

height: ~"calc(100% + 2em)";

^ I'm using LESS, and if it's not escaped, I'd end up with a height of 102%.

How to make sidebar height equal to window's height?

4 Answers4