sur mon site web (qui utilise zenphoto et bootstrap 3), j'ai un problème que je n'arrive pas à résoudre sur la hauteur d'une div.
j'utilise un navbar et un footer (fixé en absolu en page de la page).
le corps de ma page se trouve dans une div avec la class ".main".
je voudrais que cette div utilise 100% de la hauteur disponible sur la page, même quand son contenu est de "petite taille" (et n'utilise donc pas toute la hauteur de la page).
En fait, je suis passé par une autre voie : celle de jquery, qui me permet de fixer la valeur de min-height, en fonction de la hauteur de la page, de celle de mon header et de mon footer.
jQuery(document).ready(function() {
// full height for main div (windows height - "header" height - "footer" height)
$(window).resize(function() {
$('#main').css('min-height', $(window).height() - $('#menu').outerHeight(true) - $('#footer').outerHeight(true));
}).resize();
});
.outerHeight(true) permet de prendre en compte margin, border et padding, alors que outerHeight() prend en compte uniquement border et padding.
Comme je le disais, c'est dommage d'utiliser du javascript (en chargeant jQuery en plus) pour ça alors que le CSS peut le faire tout aussi bien (sinon mieux, puisqu'il n'a pas besoin de lire le DOM en entier comme le fait le JS).
C'est à toi de voir.
- Edité par EmmanuelBeziat 27 juin 2017 à 10:57:14
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
div qui ne prend pas toute la hauteur disponible
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !