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

Posted 2023-03-06

【中文标题】根据视口高度动态设置 DIV 高度

【英文标题】：Set DIV height dynamically based on viewport height

【发布时间】：2011-09-27 17:30:43

【问题描述】：

我正在尝试将 div 的高度设置为视口高度的 30%，并且我非常希望在视口高度发生变化时对其进行缩放。

我尝试设置 min-height: 30%; height:30% 但它不起作用。

我看了一下 JQuery 的 height();但我就是不知道如何开始。

谢谢。

【参考方案1】：

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);
);

【讨论】：

感谢您的工作... Liam 的回答已被接受。我无法让它工作：jsfiddle.net/QqwCM/1

它不会在 jsfiddle 中工作，因为它在 iframe 中运行，如果你将该代码放入带有 的 .html 文件中> 包括它工作正常。在 30_pc 函数定义中设置为 $(window).height()（如上更改）以获得完整的跨浏览器支持。

【参考方案2】：

这基本上是 Liam Bailey 的答案，但使用了一个应该更快、更简洁的三十个 PC()：

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


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

如果您喜欢它，请仍然接受 Liam 的，但请支持我的。 :)

【讨论】：

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

显然百分比计算可以压缩到 $.css 方法调用中，我这样做是因为新手更容易看到正在做什么以及如何做，我不是专家分析 parseInt 和 Math.Round 在速度方面的差异，但我认为差异并不值得担心。 @bbg 不，它不必是 $(window).height() 因为 window 元素存在于 javascript 中，并且不是 jQuery 特定的。

@Liam：有趣的观察；也对您的答案+1。我在 FF 和 chrome 中不断收到“函数未定义”错误，但是当我将窗口包装在 jQuery 对象中时，我让它工作。

你是对的 bbg，无论如何我都应该使用 $(window)，当你在 jQuery 中工作时，我认为最好将它的包装器用于对象，以获得更好的跨浏览器支持。

【参考方案3】：

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

【讨论】：

您的答案与接受的答案有何不同？

刚刚发布了我是如何用更少的东西做到这一点的

【参考方案4】：

这对于任何 div 的视口高度 100% 有效，具有此类使用 Jquery 的部分。 使用附加功能将高度调整为 30%，目前为 100%，喜欢的话请推广。

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


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