In bootstrap I have a fixed top nav bar and fixed bottom nav bar. I want to show a large image in the background between the space of those two nav bars and I also want to cover the width of the window. How can I dynamically get the height between the navbars and the width of the window? The window size may change depending on device.So I need it dynamic

In bootstrap I have a fixed top nav bar and fixed bottom nav bar. I want to show a large image in the background between the space of those two nav bars and I also want to cover the width of the window. How can I dynamically get the height between the navbars and the width of the window? The window size may change depending on device.So I need it dynamic

• javascript
• jquery
• html
• css
• twitter-bootstrap

• Can you show a little code - I guess you have your elements in divs for example? – Sam Redway Commented Aug 7, 2015 at 17:19
• Use Jquery and use $(document).height() - (height of top nav bar) - (height of bottom nav bar). – Mopparthy Ravindranath Commented Aug 7, 2015 at 17:20
• except that gives him the height of the whole document. He needs only between the two elements, as I understand it.. – Sam Redway Commented Aug 7, 2015 at 17:23

3 Answers 3

Requires jquery:

var viewport = {
    width  : $(window).width(),
    height : $(window).height()
};

//can access dimensions like this:
//viewport.height

Though you won't always get perfect results, different devices behave differently and this gives the viewport dimensions, not the screen dimensions.

Alternatively you could check the width of a data-role="page" element to find the device-width (since it's set to 100% of the device-width):

var deviceWidth = 0;
$(window).bind('resize', function () {
    deviceWidth = $('[data-role="page"]').first().width();
}).trigger('resize');​​​

$(window).resize(function() {
    var top_nav_height = $("#id_of_top_nav").height();
    var bottom_nav_height = $("#id_of_bottom_nav").height();  
    var window_height = $(window).height();

    var height_of_open_space = window_height - (top_nav_height+bottom_nav_height);

    $("#id_of_img").css({
         height:height_of_open_space+'px';
    });

});

this will be fine with if 0px padding and margin, if not also get that values and subtract from height_of_open_space before applying to img height

It is a bit hard to tell without seeing any of your markup, but it should be feasable with pure css. I set up a very basic example to demonstrate: http://codepen.io/anon/pen/XbGJJO

HTML:

<div class='top'>
  top navbar
</div>
<div class='content'>
  <p> some content </p>
</div>
<div class='bottom'>
  bottom navbar
</div>

CSS:

.top, .bottom {
  height: 40px;
  background: red;
  position: fixed;
  width: 100%;
}
.top {
  top: 0;
}
.bottom {
  bottom: 0;  
}

.content {
  margin: 40px 0;
  min-height: calc(100vh - 80px);
  background: green; /* background goes here */
}

The trick lies in the following line:

min-height: calc(100vh - 80px);

This tells your content to at least take up 100% of the vertical height, minus the height of the top and bottom bar. Let me know if you want me to explain further.