Resizing div depending on screen size

Question

I am more of a front end dev so am only really a copy and paste jQuery/Javascript kinda guy. I can amend bits after reading but any help or amending of the code would be great.

I want to have a banner div fill all but the last 50px or 100px of the screen so that the user can see there is more content to scroll onto (this is done with and arrow graphically).

This also needs to happen no matter the screen size desktop to mobile. I have the following code that resizes my containing div to fill the screen and works for all devices from testing i just need the last part that then removes xx pixels to bing in the below content to be seen on the screen.

I have these 2 snippets that work great to full the screen

Snippet 1

<script type="text/javascript">
function handleResize() {
var h = jQuery(window).height();
    jQuery('.banner_slide').css({'height':h+'px'});
}
jQuery(function(){
    handleResize();
    jQuery(window).resize(function(){
    handleResize();
});
});
</script>

Snippet 2

<script type="text/javascript">
jQuery(function(){
    var windowH = jQuery(window).height();
    var wrapperH = jQuery('.banner_slide').height();
    if(windowH > wrapperH) {                            
        jQuery('.banner_slide').css({'height':(jQuery(window).height())+'px'});
    }                                                                               
jQuery(window).resize(function(){
    var windowH = jQuery(window).height();
    var wrapperH = jQuery('.banner_slide').height();
    var differenceH = windowH - wrapperH;
    var newH = wrapperH + differenceH;
    var truecontentH = jQuery('.banner_slide div').height();
    if(windowH > truecontentH) {
        jQuery('.banner_slide').css('height', (newH)+'px');
    }
    })          
});
</script>

Any help would be amazing

Answer 1

If ancient browser support is not a problem you can use css3 calc() function.

set padding-right:50px for the parent, apply width: calc(100% - 50px) and absolutely position the image at the padding space

Answer 2

Why don't you use media queries in css instead?

Then you can adjust to all screen sizes, height and width depending on which way you set it.

For example:

    @media (min-height: 500px) and (max-height: 796px){

     .banner_slide{
    height: 746px;
           }

    }

Then you can adjust the style to whatever screen size you want so if it's mobile size depending on the mobile it could be smaller. (Adjust to whatever suits!)

 @media (min-height: 0px) and (max-height: 350px){

     .banner_slide{
    height: 300px;
           }

    }

Answer 3

In snippet 2 the resulting height is calculated by substracting the banner height from the window height

var windowH = jQuery(window).height();
var wrapperH = jQuery('.banner_slide').height();
var differenceH = windowH - wrapperH;

can u substract the height of your bottom offset just like that ?

var windowH = jQuery(window).height();
var wrapperH = jQuery('.banner_slide').height();
var bottomOffset = jQuery('.image_on_bottom_page').height;
var differenceH = windowH - wrapperH - bottomOffset;