jQuery - Find Remaining Height of HTML Element and apply Background Color to it -

how can find remaining height of #home-banner div , apply background color it?

description: want find height of #home-banner , apply red background color it.

fiddle

some key points have observed below code...

why getting scrollbar though using 100% height body , html? jquery cannot calculate box model or other way it?

• .navbar -- actaul heihgt is: 85px, showing 84px (ignoring border-bottom 1px?)
• .home-logo -- actaul heihgt is: 190px, showing 90px (ignoring margin top 50px , bottom 50px?)
• #login-form -- actaul heihgt is: 240px, showing 200px (ignoring padding top 20px , bottom 20px?)
• .s-info -- actaul heihgt is: 65px, showing 200px (ignoring padding top 10px , bottom 10px?)
• #footer -- actaul heihgt is: 51px, element showing correct height:                       ps: have removed, padding , margin , inside element

html:

<div class="navbar">navbar</div>  <div id="home-content">      <div class="container">          <div class="home-logo">logo placeholder</div>          <div id="login-form">             <p>login form</p>             <p>lorem</p>             <p>ipsum</p>             <p>dolar</p>             <p>sit</p>             <p>amet</p>         </div>          <div id="home-banner">             banner height (excluding .navbar, .home-logo, #login-form, #footer, .s-info)         </div>      </div>      <div class="s-info"><p>some information</p></div>      <div id="footer">         <h1>footer</h1>         <p>dummy content</p>     </div>  </div> 

jquery:

$(document).ready(sizecontent);  $(window).resize(sizecontent);  function sizecontent() {     var newheight = $("html").height() - $(".navbar").height() - $(".home-logo").height() - $("#login-form").height() - $(".s-info").height() - $("#footer").height() + "px";      $("#home-banner").css("height", newheight );      alert('navbar height:  ' + $(".navbar").height()); // 84     alert('home logo height:  ' + $(".home-logo").height()); // 93     alert('login form height:  ' + $("#login-form").height()); // 200     alert('banner height:  ' + $("#home-banner").height()); // 442     alert('s info height:  ' + $(".s-info").height()); // 45     alert('footer height:  ' + $("#footer").height());  // 51      alert('html height:  ' + $("html").height()); } 

css:

html,body{height:100%;padding:0;margin:0;font-family:verdana;font-size:14px;} .navbar{height:84px;background:yellow;border:0;border-bottom:1px solid #000;} .home-logo{background:#999;margin:50px 0;height:90px;} #login-form{padding:20px 0;background:#ccc;} .s-info{padding:10px 0;background:#666;} #footer{padding:0;background:#eee;} #footer p{margin:0;padding:0;} #footer h1{padding:0;margin:0;} #home-banner{background:red;text-align:center;color:#fff;font-weight:bold;} 

---

hurray... found solution....

thanks jquery api...

here working code:

$(document).ready(sizecontent);  $(window).resize(sizecontent);  function sizecontent() {     var newheight = $("html").outerheight(true) - $(".navbar").outerheight(true) - $(".home-logo").outerheight(true) - $("#login-form").outerheight(true) - $(".s-info").outerheight(true) - $("#footer").outerheight(true) + "px";      $("#home-banner").css("height", newheight );      alert('navbar height:  ' + $(".navbar").outerheight(true)); // 84     alert('home logo height:  ' + $(".home-logo").outerheight(true)); // 93     alert('login form height:  ' + $("#login-form").outerheight(true)); // 200     alert('banner height:  ' + $("#home-banner").outerheight(true)); // 442     alert('s info height:  ' + $(".s-info").outerheight(true)); // 45     alert('footer height:  ' + $("#footer").outerheight(true));  // 51      alert('html height:  ' + $("html").outerheight(true)); }