我有一个 div,我想成为两种尺寸之一。
- 如果浏览器窗口高度小于给定高度,则它使用较小的高度作为 div
- 但是,如果浏览器窗口的高度大于给定的高度,那么它会为 div 使用更大的高度
我尝试了以下代码,但它不起作用。我需要帮助才能让它工作。
这是 jsbin:http: //jsbin.com/oFIRawa/1
这是我到目前为止的代码:
page.html
<div id="theDiv"> </div>
样式.css
#theDiv {
background: #000;
border: 2px solid #222;
width: 300px;
height: 400px;
margin: 50px auto 0 auto;
}
脚本.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);
};
})();
});