Question

我想创建一个以下列方式运行的div：

它总是将其高度调整为浏览器窗口高度的100％。
它将调整他的宽度以保持恒定的比例（这样他的宽度将等于他的高度的3/5为一个实例）

这里有一些例子可以做相反的事情 - 保持宽度在浏览器窗口大小的某个固定％值，并相应地调整高度，但它不是我需要的。

Answer 1

尝试以下jQuery：

$(window).resize(function(){
    $('#resizable').width($('#resizable').height()*3/5);
});

$(window).trigger('resize');

Demo Fiddle

Answer 2

我在这里使用jquery：

window.onresize = function() {
  var el_height = $(element).height(window.innerHeight);
  $(element).width((el_height*3)/5);
}

Answer 3

你可以做的是用jQuery获取浏览器窗口的高度，并相应地设置div的宽度。

function changeDivSize(){
    var wHeight = $(window).height();
    var newDivWidth = height * 0.6;
    $("#divId").height(wHeight);
    $("#divId").width(newDivWidth);
};
$(document).ready(changeDivSize);
$(window).resize(changeDivSize);

Answer 4

我打算支持Nocky Tellekamp的回答，但它错过了几件事：

首先，为了在跨浏览器中获取窗口Hieght，您需要使用$(window).innerHeight();

正确的代码视图：

$(document).ready(function() {
    var WindowHeight = $(window).innerHeight(); //$(window).height() not working in I.E and part of other wierd browsers not based on mozila engine
    $("#divId").css {            //proper and more orgenized code view of css changing
         hieght : WindowHeight,
         width : WindowHieght * 0.6
    };

}）;

you dont have to call method on window.resize (causes very bad performance issue if bigger algorithem involved), if it does bother's you, i would suggest to use different css properties such as clear:both when setting the div so actually it will spread on the entire window height and width.

Div具有恒定的比例，始终为屏幕高度的100％

4 个答案:

Demo Fiddle