如果浏览器高度小于给定的像素数,如何更改div高度?

时间:2013-10-17 13:47:23

标签: javascript html css height window-resize

我有一个div,我想成为两种尺寸之一。

  • 如果浏览器窗口高度小于给定高度,则它使用div的较小高度
  • 但是,如果浏览器窗口高度大于给定高度,则它使用较大的div高度

我尝试了以下代码,但它无效。我需要帮助才能让它发挥作用。

这是jsbin:http://jsbin.com/oFIRawa/1

这是我到目前为止的代码:

page.html中

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

的style.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);
        };
     })();
});

2 个答案:

答案 0 :(得分:5)

你可以在CSS中做这个我的好先生。它被称为响应式设计!

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

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

这更常用于max-width,因为它可以告诉我们何时有人使用移动设备(类似360px max-width),然后我们可以修改我们的页面以便在移动设备上看起来不错。不需要花哨的JavaScript!

答案 1 :(得分:2)

var threshhold;
var smallerHeight = 50;
var largerHeight = 100;

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

<强> FIDDLE

Demo