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

Question

我想将一个div的高度设置为视口高度的30％，并希望在视口高度更改时进行缩放。

我尝试设置min-height: 30％; height:30％，但无效。

我查看了JQuery的height（）方法，但不知道如何开始。

谢谢。

- elbatron

Answer 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 Bailey

---

感谢您的工作...Liam的答案已被接受。但我无法使其正常工作：http://jsfiddle.net/QqwCM/1/ - elbatron

它在jsfiddle中无法工作，因为它在iframe中运行，如果您将该代码放入一个包含<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>的.html文件中，它可以正常工作。在thirty_pc函数定义中（如上所述更改），将其设置为$(window).height()，以实现完全跨浏览器支持。 - Liam Bailey

Answer 2

这基本上是Liam Bailey的答案，但使用了一个thirty_pc()函数，它应该更快且更简洁：

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

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

如果你喜欢它，请仍然接受Liam的回答，但给我的答案点个赞。:)

- Bernd Haug

---

哦，我创建了一个新的内容，不是评论，因为在评论中我无法多行输入。我并不想窃取任何人的功劳... - Bernd Haug

显然，百分比计算可以压缩成$.css方法调用，我之所以这样做是因为对于新手来说更容易看到正在执行的操作以及如何执行。就速度而言，我不是parseInt和Math.Round之间的专家，但我认为它们之间的差异不足以引起担忧。而且@bbg没有必要使用$(window).height()，因为window元素存在于javascript中，而不是特定于jQuery。 - Liam Bailey

@Liam：有趣的观察；你的答案也加一分。我在FF和Chrome中一直收到“函数未定义”的错误，但当我将窗口包装在jQuery对象中时，它可以工作。 - bbg

你说得对bbg，无论如何我应该使用$(window)，当你在使用jQuery时，使用其对象的包装器可能是一个好主意，以获得更好的跨浏览器支持。 - Liam Bailey

Answer 3

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

- nathan

---

你的答案与被接受的答案有何不同？ - Max Leske

刚刚发布了如何使用更少的方式完成它的方法。 - nathan

Answer 4

这个使用Jquery的函数可以完美适配任何具有此类的div、section视口高度，百分比高度目前为100%，可以使用其他函数将其调整为30%。如果您喜欢，请推广它。

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

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

- Nikhil Goswami