jQuery - 查找 HTML 元素的剩余高度并为其应用背景颜色

Question

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

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

FIDDLE

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

为什么我在 body 和 html 中使用 100% 高度时却出现滚动条？ jQuery 无法计算 BOX Model 或任何其他方式吗？

• .navbar -- Actaul Heihgt 是：85px，但它只显示 84px （忽略border-bottom 1px？）
• .home-logo -- Actaul Heihgt 是： 190px，但它只显示 90px（忽略边距顶部 50px 和 底部 50 像素？）
• #login-form -- Actaul Heihgt 是：240px，但它只显示 200px（忽略顶部 20px 和底部 20px 的内边距？）
• .s-info -- 实际 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

---

万岁……我找到了解决方案……

感谢 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());

对于背景颜色：

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