Définition dynamique de la hauteur d'un DIV

Question

Dans une application Web, j'ai une page qui contient un DIV dont la largeur est 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 300 pixels de l'écran supérieur et sa hauteur devrait l'étendre jusqu'au bas de l'écran du navigateur.J'ai une hauteur maximale pour le conteneur DIV, il devrait donc y avoir une hauteur minimale pour le div.Je crois que je peux simplement limiter cela en CSS et utiliser Javascript pour gérer le redimensionnement du DIV.

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

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

Answer 1

Essayez cette fonction simple et 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");
}

Cela ne dépend pas de la distance actuelle spécifiée par rapport au haut du corps (au cas où vos 300 pixels changeraient).

---

MODIFIER:À propos, vous voudriez appeler ceci sur ce div chaque fois que l'utilisateur modifie la taille du navigateur, vous devrez donc bien sûr connecter le gestionnaire d'événements pour cela.

Answer 2

Que doit-il se passer en cas de débordement ?Si vous souhaitez qu'il atteigne simplement le bas de la fenêtre, utilisez le positionnement absolu :

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

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

---

Modifier:@Quiconque a noté cela, une explication serait la bienvenue...Quelque chose ne va pas dans la réponse ?

Answer 3

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

Il s'agit du code JS très basique requis pour ajuster dynamiquement la hauteur de votre objet.Je viens de faire exactement cela où j'avais une propriété de hauteur automatique, mais lorsque j'ajoute 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 4

Le DIV abrite un contrôle qui gère sa propre gestion des débordements.

Answer 5

Si je comprends ce que vous demandez, ceci 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 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

Le plus simple que je puisse trouver...

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

Il ne vous reste plus qu'à ajouter la classe redimensionnableHeight à tout ce que vous souhaitez redimensionner automatiquement (à son parent).

Answer 8

inspiré de @jason-bunting, même chose pour la hauteur ou la 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");
}