Définition dynamique de la hauteur d'un DIV

Question

Dans une application Web, j'ai une page qui contient un DIV ayant une largeur automatique en fonction de la largeur de la fenêtre du navigateur.

J'ai besoin d'une hauteur automatique pour l'objet. Le DIV commence environ 300px à partir de l'écran supérieur, et sa hauteur devrait le faire s'étendre au bas de l'écran du navigateur. J'ai une hauteur maximale pour le conteneur DIV, donc il devrait y avoir une hauteur minimale pour le div. Je crois que je peux juste restreindre cela en CSS, et utiliser Javascript pour gérer le redimensionnement de la DIV.

Mon javascript n'est pas aussi bon qu'il devrait l'être. Y a-t-il un script facile que je pourrais écrire qui ferait cela pour moi?

Editer: Le DIV héberge un contrôle qui effectue sa propre gestion de débordement (implémente sa propre barre de défilement).

Answer 1

Essayez ceci, fonction spécifique:

function resizeElementHeight(element) { 
    var height = 0; 
    var body = window.document.body; 
    if (window.innerHeight) { 
     height = window.innerHeight; 
    } else if (body.parentElement.clientHeight) { 
     height = body.parentElement.clientHeight; 
    } else if (body && body.clientHeight) { 
     height = body.clientHeight; 
    } 
    element.style.height = ((height - element.offsetTop) + "px"); 
} 

Il ne dépend pas de la distance courante à partir de la partie supérieure du corps étant précisé (au cas où les changements 300px).

---

EDIT: D'ailleurs, vous voulez appeler cela sur cette div chaque fois que l'utilisateur a changé la taille du navigateur, de sorte que vous devrez câbler le gestionnaire d'événements pour cela, bien sûr.

Answer 2

Que se passe-t-il en cas de débordement? Si vous voulez juste aller au fond de la fenêtre, utilisez le positionnement absolu:

div { 
    position: absolute; 
    top: 300px; 
    bottom: 0px; 
    left: 30px; 
    right: 30px; 
} 

Cela mettra l'30px DIV dans de chaque côté, 300px à partir du haut de l'écran, et au ras du fond. Ajoutez un overflow:auto; pour gérer les cas où le contenu est plus grand que div.

---

Editer: @Qui a marqué cela, une explication serait bien ... Quelque chose ne va pas avec la réponse?

Answer 3

Le DIV abrite un contrôle qui effectue sa propre gestion de débordement.

Answer 4

Si je comprends ce que vous demandez, cela devrait faire l'affaire:

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use 
// window.innerWidth and window.innerHeight 

var windowHeight; 

if (typeof window.innerWidth != 'undefined') 
{ 
    windowHeight = window.innerHeight; 
} 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first 
// line in the document) 
else if (typeof document.documentElement != 'undefined' 
     && typeof document.documentElement.clientWidth != 'undefined' 
     && document.documentElement.clientWidth != 0) 
{ 
    windowHeight = document.documentElement.clientHeight; 
} 
// older versions of IE 
else 
{ 
    windowHeight = document.getElementsByTagName('body')[0].clientHeight; 
} 

document.getElementById("yourDiv").height = windowHeight - 300 + "px"; 

Answer 5

document.getElementById('myDiv').style.height = 500;

Voici le code JS très basique nécessaire pour ajuster la hauteur de votre objet dynamiquement. Je viens de faire cette chose même où j'avais une propriété de hauteur automatique, mais quand j'ai ajouté du contenu via XMLHttpRequest j'avais besoin de redimensionner mon div parent et cette propriété offsetheight a fait l'affaire dans IE6/7 et FF3

Answer 6

Avec des corrections mineures:

function rearrange() 
{ 
var windowHeight; 

if (typeof window.innerWidth != 'undefined') 
{ 
    windowHeight = window.innerHeight; 
} 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first 
// line in the document) 
else if (typeof document.documentElement != 'undefined' 
     && typeof document.documentElement.clientWidth != 'undefined' 
     && document.documentElement.clientWidth != 0) 
{ 
    windowHeight = document.documentElement.clientHeight; 
} 
// older versions of IE 
else 
{ 
    windowHeight = document.getElementsByTagName('body')[0].clientHeight; 
} 

document.getElementById("foobar").style.height = (windowHeight - document.getElementById("foobar").offsetTop - 6)+ "px"; 
} 

Answer 7

Simplest je pouvais venir ...

function resizeResizeableHeight() { 
    $('.resizableHeight').each(function() { 
     $(this).outerHeight($(this).parent().height() - ($(this).offset().top - ($(this).parent().offset().top + parseInt($(this).parent().css('padding-top'))))) 
    }); 
} 

Maintenant, tout ce que vous avez à faire est d'ajouter la classe resizableHeight à tout ce que vous voulez autoSize (à sa parent).

Answer 8

inspiré par @ jason-Bruant, même chose pour hauteur ou largeur:

function resizeElementDimension(element, doHeight) { 
    dim = (doHeight ? 'Height' : 'Width') 
    ref = (doHeight ? 'Top' : 'Left') 

    var x = 0; 
    var body = window.document.body; 
    if(window['inner' + dim]) 
    x = window['inner' + dim] 
    else if (body.parentElement['client' + dim]) 
    x = body.parentElement['client' + dim] 
    else if (body && body['client' + dim]) 
    x = body['client' + dim] 

    element.style[dim.toLowerCase()] = ((x - element['offset' + ref]) + "px"); 
}