jQuery - 查找HTML元素的剩余高度并将背景颜色应用于它

Question

如何找到 #home-banner Div的剩余高度并为其应用背景颜色？

说明 我想找到 #home-banner 的高度，并为其应用红色背景颜色。

FIDDLE

我在以下代码中观察到的一些要点......

为什么我得到滚动条虽然我使用100％高度的body和html？ jQuery无法计算BOX模型或其他任何方式吗？

• .navbar - Actaul Heihgt是：85px，但它只显示84px （忽略border-bottom 1px？）
• .home-logo - Actaul Heihgt是： 190px，但它只显示90px（忽略前50px和 底部50px？）
• #login-form - Actaul Heihgt是：240px，但它只显示200px（忽略填充顶部20px和底部20px？）
• .s-info - Actaul Heihgt是：65px，但它只显示200px（忽略填充顶部 10px和底部10px？）
• #footer - Actaul Heihgt是：51px，它是显示正确高度的唯一元素： PS：我已删除，填充内容和内部元素

  

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;
}

Answer 1

Hurray ......我找到了解决方案....

感谢jQuery API ......

这是工作代码：

$(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));
}

Answer 2

高度：

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

对于background-Color：

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