Установите высоту DIV динамически в зависимости от высоты области просмотра

Question

Я пытаюсь установить высоту div на 30% от высоты области просмотра, и мне очень хотелось бы масштабировать ее при изменении высоты области просмотра.

Я попытался установить минимальную высоту: 30%; высота: 30%, но это не работает.

Я посмотрел на высоту JQuery (); но я просто не знаю с чего начать.

Благодарю.

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

Answer 2

Это в основном ответ Лиама Бэйли, но с тридцать_пк (), который должен быть и быстрее, и более кратким:

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

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

Если вам это нравится, пожалуйста, по-прежнему принимайте Лиама, но проголосуйте за мое.:)

Answer 3

Этот работает 100% для высоты области просмотра любого div, секции, у которой есть этот класс, используя Jquery. Используйте дополнительную функцию, чтобы отрегулировать высоту до 30% в настоящее время это 100%, пожалуйста, рекламируйте, если вам это нравится.

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

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

Answer 4

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