Bx Slider increase the height of the div

Question

I'm using bxslider and images that scale their height depending on screen size. In order to allow it to show all the content, it hides overflow I want to also increase the height of bx-viewport the jquery I've written re adjusts the height of bx-wrapper only. Here's the jquery below and the demo on jsfiddle here: http://jsfiddle.net/vgJ9X/838/

$( window ).resize(function() {
      width = $('.bx-wrapper').width()/3;
      width -= 14;
      var height = width+29;
      if (width > 160) {
          width = 160;
          height = 200;
      }
      box_height = height+height+(height/2);
      $('.bx-wrapper').css('height',box_height); 
      $('.bx-viewport').css('height',box_height); 

});

EDIT: My question is why $('.bx-viewport').css('height',600); fails to work when places in the resize function but works when I type it in the console, I know there's an adaptiveHeight but for my case I have 6 images: 3 above 3 below so for the space below to be the same as it scales I have to calculate also height of the image, for that demo I've used a pre existing test made jsfiddle.net/vgJ9X/1 since if it works with one instance of bxslider it should work with mine. I know I'm new to this, I'm just getting better with jquery. Unlike this post Bxslider Setting Height I need the height to change when you resize the browser if you look at the example jsfiddle you'll see the bottom navigation tabs as black dots moves because the jquery does change the height. I need to also implement the same for the div with the content bx-viewport

Answer 1

This fixed the issue.

.bx-viewport {
    height: 100% !important;
 }

It works because it's a child of the first div so it "inherits" the parent div's height.