it-swarm.com.de

Stellen Sie die DIV-Höhe dynamisch basierend auf der Höhe des Ansichtsfensters ein

Ich versuche, die Höhe eines Divs auf 30% der Höhe des Ansichtsfensters festzulegen, und ich würde es sehr gerne skalieren, wenn sich die Höhe des Ansichtsfensters ändert.

Ich habe versucht, die Mindesthöhe einzustellen: 30%; Höhe: 30%, aber es funktioniert nicht.

Ich habe mir JQueries Größe angesehen (); Aber ich weiß einfach nicht, wie ich anfangen soll.

Vielen Dank.

12
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);
});
27
Liam Bailey

Dies ist im Grunde die Antwort von Liam Bailey, aber mit einem thirty_pc () sollte das sowohl schneller als auch prägnanter sein:

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

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

Wenn es dir gefällt, akzeptiere bitte immer noch Liams, aber stimme meiner zu. :)

19
Bernd Haug
window.onresize=function(){
    $("#selectedDiv").height( ($(window).height()*.3) );
}
0
nathan

Dies funktioniert zu 100% für die Ansichtsfensterhöhe aller Divs, die diese Klasse mit Jquery haben. Verwenden Sie die Zusatzfunktion, um die Höhe auf 30% einzustellen. Derzeit sind es 100%. Bitte bewerben Sie sich, wenn Sie möchten.

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

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