javascript - 背景应该在窗口调整大小时使用 JQuery 适应内容高度

Question

div 的内容将动态设置。div #background 应该适应（单独的）div 将具有的高度。当浏览器调整大小时，背景也应该适应 div 的大小调整。因此，该操作应该在页面加载或调整浏览器大小时发生。

<div id="wrapper">
<div id="background"></div>
<div id="content">
    <p>This content will be set dynamically.
        <br>The div #background should adapt to this height.
        <br><br><br><br><br><br>
        <br>This should happen when the page loads,
        <br>or when the browser is resized.
        <br>At this moment, it only works when
        <br>the page loads.
        <br>
    </p>
    <!-- end #content -->
</div>
<!-- end #wrapper -->

目前，它仅在页面加载时才有效，尽管我添加了以下代码：

$(window).resize(function () {
    $("#background").css({
        height: ($("#wrapper").height() + 50) + 'px'
    });
});

我怎样才能使调整大小的位起作用？谢谢。

这是一个测试这个的jsfiddle

Answer 1

您的resize处理程序按预期工作，但问题是#wrapper除非您给它高度，否则它不会改变高度，所以现在您只需在每次触发时将heighton更新为相同的值：#backgroundresize

$(window).resize(function () {
    $("#background").css({
        height: ($("#wrapper").height() + 50) + 'px'
        //       ^^^^^^^^^^^^^^^^^^^^^^ this value never changes
    });
});

这是我添加的更新演示

html, body, #wrapper { height: 100%; }

Answer 2

演示

使用display: inline-block.

$(window).resize(function () {
    $("#background").css('display': 'inline-block');
});

Answer 3

你应该使用.on()：

$(window).on("resize load", function () {
    $("#background").css({
        height: ($("#wrapper").height() + 50) + 'px'
    });
});

那对你有用吗？

Answer 4

在加载时触发它。

$(window).resize(function () {
    $("#background").css({
        height: $("#wrapper").height() + 50
    });
}).trigger("resize");

http://api.jquery.com/trigger/

http://jsfiddle.net/dzdH5/