web-dev-qa-db-fra.com

Définir la hauteur DIV de manière dynamique en fonction de la hauteur de la fenêtre

J'essaie de régler la hauteur d'une div à 30% de la hauteur de la fenêtre et j'aimerais beaucoup l'adapter lorsque la hauteur de la fenêtre change.

J'ai essayé de régler min-height: 30%; hauteur: 30% mais ça ne marche pas.

J'ai jeté un coup d'oeil à la taille de JQuery (); mais je ne sais tout simplement pas comment commencer.

Merci.

jqueryheightviewport
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

Ceci est fondamentalement la réponse de Liam Bailey, mais avec une trente-pc (), cela devrait être à la fois plus rapide et plus concis:

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

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

Si vous l'aimez, acceptez quand même celui de Liam, mais contrôlez le mien. :)

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

Celui-ci fonctionne à 100% pour la hauteur de la fenêtre d'affichage de toute div, section qui a cette classe en utilisant Jquery. Utilisez une fonction supplémentaire pour ajuster la hauteur à 30% actuellement, c’est 100%, merci de le promouvoir si vous le souhaitez.

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

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