根据视口高度动态设置DIV高度

我试图将div的高度设置为视口高度的30％，我非常想在视口高度发生变化时对其进行缩放。根据视口高度动态设置DIV高度

我试过设置最小高度：30％;身高：30％，但不起作用。我看了一下JQuery的height（）;但我只是不知道如何开始。

谢谢。

2011-07-03 elbatron

function thirty_pc() { 
    var height = $(window).height(); 
    var thirtypc = (30 * height)/100; 
    thirtypc = parseInt(thirtypc) + 'px'; 
    $("div").css('height',thirtypc); 
} 

$(document).ready(function() { 
    thirty_pc(); 
    $(window).bind('resize', thirty_pc); 
});

来源

2011-07-03 18:45:15

感谢您的工作......利亚姆的答案被接受。我不能让它工作，虽然：http://jsfiddle.net/QqwCM/1/ – elbatron

它不会在jsfiddle工作，因为它运行在iframe中，如果你把该代码放入一个.html文件与包括它工作正常。在30_pc函数定义（如上面所做的更改）中将它设置为$（window）.height（），以实现完整的跨浏览器支持。 –

感谢利亚姆，它的工作原理！ – elbatron

这基本上是利亚姆·贝利的回答，但有thirty_pc（）应该是速度更快，更简洁：

function thirty_pc() { 
    $("div").css('height', '' + Math.round(.3 * window.height())); 
} 

$(document).ready(function() { 
    thirty_pc(); 
    $(window).bind('resize', thirty_pc); 
});

如果你喜欢它，请仍然接受Liam的，但给予好评矿。 :)

来源

2011-07-03 19:25:55

哦，我做了一个新的不是评论，因为我不能在评论中多行。我不想在这里窃取任何人的信用... –

应该是'$（window）.height（）;'??? （也在其他答案中） – bbg

很明显，百分比计算可能会被压缩到$ .css方法调用中，我这样做是因为它更容易让新手看到正在做什么以及如何做，我没有专家对parseInt和Math.Round在速度方面的区别，但我认为差异不值得担心。而@bbg不需要$（window）.height（），因为window元素存在于javascript中，而不是jQuery特有的。 –

window.onresize=function(){ 
    $("#selectedDiv").height(($(window).height()*.3)); 
}

来源

2015-09-26 09:31:26 nathan

你的回答与接受的回答有何不同？ –

刚刚发布了我如何少用 – nathan

这个工作100％的任何div的视区高度，有这个类使用jquery的部分。使用附加功能将高度调整为30％，目前为100％，如果您喜欢，请进行宣传。

function thirty_pc() { 
    $(".introduction").css({'height':($(window).height())+'px'}); 
} 

$(document).ready(function() { 
    thirty_pc(); 
    $(window).bind('resize', thirty_pc); 
});

来源

2016-03-25 13:26:21

根据视口高度动态设置DIV高度

回答

相关问题