-2

さて、要素をページの全高にしようとしています。inspect要素ボックスをサイズ変更または開いて閉じても、html要素はページサイズと一致しますが、本体や他の要素は一致しないため、代わりにjavascriptを使用して要素をhtmlボックスのサイズにします。これは機能しますが、ブラウザウィンドウのサイズを変更したり、開発者ツールを閉じたり開いたりすると、html要素のサイズは変更されますが、他の要素は変更されません。

高さが変更されたときに関数を実行するために、html要素にリスナーを追加する方法はありますか？

これは、誰かが提案したものを使用して試したが機能しないコードです。

$('#program-cell').height($('html').height());
$('html').resize(function () {
    $('#program-cell').height($('html').height());
});

.resize（）プラグインを追加した後、答えの1つは、ほぼ機能させることができたことを示唆しました。開発者ツールを開いたり閉じたりすると機能しますが、ウィンドウのサイズを変更しても何も変わりません。html要素のサイズと一致しているため、サイズ変更しているオブジェクトのサイズと一致するようにhtml要素が大きくなります。つまり、大きくなるだけで、小さくなることはありません。

サイズを変更するオブジェクトの高さをautoに設定してクリアし、HTMLの高さと一致させる必要がありました。私はついにそれを機能させました、そしてここに機能するコードがあります：

$('#program-cell').height(($('html').height()-84)+'px');
$('html').resize(function () {
    $('#program-cell').height('auto');
    $('#program-cell').height(($('html').height()-84)+'px');
});

ヘッダーの高さを差し引くために-84があります。

4

2 に答える 2

3

JavaScriptはまったく必要ありません。

html, body { height:100%; }
div { height:100%; }

<html> <!-- 100% of window height -->
    <body> <!-- 100% of html height -->
        <div></div> <!-- 100% of body height -->
    </body>
</html>

JSFiddleの例。

仕切りの親の値が100％の高さではない場合、仕切りはページ本体に対して100％の高さにはなりません。

<html> <!-- 100% of window height -->
    <body> <!-- 100% of html height -->
        <div style="height:30px"> <!-- 30px high parent -->
            <div></div> <!-- 100% of parent height = 30px -->
        </div>
    </body>
</html>
于 2013-03-15T13:51:07.297 に答える
2

要素のサイズ変更用のリスナーを追加するプラグインがあり、これを使用してそれを実行できます。こちらでチェックしてください。

または、ウィンドウで.resize()動作します。

于 2013-03-15T13:51:28.440 に答える