0

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があります

4

4 に答える 4

2

ハンドラーresizeは意図したとおりに機能してい#wrapperますが、高さを指定しない限り高さが変わらないという問題があるため、現在は、起動するたびheightに onを同じ値に更新しているだけです。#backgroundresize

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

ここに私が追加した更新されたデモがあります

html, body, #wrapper { height: 100%; }
于 2013-08-23T12:59:28.220 に答える
0

デモ

使用してdisplay: inline-blockください。

$(window).resize(function () {
    $("#background").css('display': 'inline-block');
});
于 2013-08-23T12:53:54.140 に答える
0

使用する必要があります.on()：

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

それはあなたのために働きますか？

于 2013-08-23T12:54:30.917 に答える
0

ロード時にトリガーします。

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

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

http://jsfiddle.net/dzdH5/

于 2013-08-23T12:56:48.653 に答える