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

1
votes

How Can I find a Remaining height of #home-banner Div and apply background color to it?

Description: I want to find the height of the #home-banner and apply red background color to it.

FIDDLE

Some key points which I have observed with below code...

Why am I getting scrollbar though I am using 100% height for body and html? jQuery cannot calculate BOX Model or any other way to do it?

  • .navbar -- Actaul Heihgt is: 85px, but it is showing only 84px (ignoring border-bottom 1px?)
  • .home-logo -- Actaul Heihgt is: 190px, but it is showing only 90px (ignoring margin top 50px and bottom 50px?)
  • #login-form -- Actaul Heihgt is: 240px, but it is showing only 200px (ignoring padding top 20px and bottom 20px?)
  • .s-info -- Actaul Heihgt is: 65px, but it is showing only 200px (ignoring padding top 10px and bottom 10px?)
  • #footer -- Actaul Heihgt is: 51px, it is the only element showing correct height:                       PS: I have removed, padding and margin for this and 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;
}
2
jquery

2 Answers

-1
votes

Hurray... I found the Solution....

Thanks to jQuery API...

Here is the 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));
}
-2
votes

For Height:

alert("Home Banner Height : "+$("#home-banner").height());

For background-Color:

$("#home-banner").css({'background-color','#cc9900'});