0

2 つのサイズのいずれかになりたい div があります。

  • ブラウザー ウィンドウの高さが特定の高さよりも小さい場合、div には小さい方の高さが使用されます。
  • ただし、ブラウザ ウィンドウの高さが指定された高さよりも大きい場合、div にはより大きな高さが使用されます。

次のコードを試しましたが、うまくいきません。私はそれを機能させるために助けが必要です。

ここに jsbin があります: http://jsbin.com/oFIRawa/1

そして、これが私がこれまでに持っているコードです:

page.html

<div id="theDiv">&nbsp;</div>

スタイル.css

#theDiv {
    background: #000;
    border: 2px solid #222;
    width: 300px;
    height: 400px;
    margin: 50px auto 0 auto;
}

script.js

$(document).ready(function () {
    // call the method one time
    updateWindowSize();
    // subscribe the method to future resize events
    $(window).resize(updateWindowSize);

    // variables
     var updateWindowSize = (function(){
        var minAllowedWindowHeight = 500;
        var largerDivHeight = 400;
        var smallerDivHeight = 300;

        // actual updateWindowSize function
        return function(){
            var winHeight = $(window).height();
            var newHeight = winHeight < minAllowedWindowHeight ? smallerDivHeight : largerDivHeight;
            $('#theDiv').height(newHeight);
        };
     })();
});
4

2 に答える 2

5

CSSでこれを行うことができます。いわゆるレスポンシブデザイン！

@media (max-height:500px) {
    Enter special css conditions for 500px height.
}

@media (max-height:200px) {
    Enter special css conditions for 200px height.
}

これは、誰かがモバイル デバイス (360px の max-width など) を使用しているときに通知できるため、max-width でより一般的に使用されます。その後、ページをモバイルで見栄えがするように変更できます。派手な JavaScript は必要ありません。

于 2013-10-17T13:55:23.397 に答える
2 
var threshhold;
var smallerHeight = 50;
var largerHeight = 100;

if ($(window).height() < threshold)
    $('#theDiv').height(smallerHeight);
else
    $('#theDiv').height(largerHeight);

フィドル

デモ

于 2013-10-17T13:57:23.940 に答える