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

如何让调整大小的位工作？感谢。

here is a jsfiddle to test this

Answer 1

您的resize处理程序按预期工作，但问题是#wrapper除非您给它高度，否则不会更改高度，因此您现在只需更新height每次#background被触发时，resize上的值都相同：

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

Here's an updated demo我添加了

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

Answer 2

Demo

使用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/

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

4 个答案: