Forum : Permettre à une section de prendre l'espace restante

Bonjour,

Afin de m'excercer, je me crée un petit agenda avec mes horaires de travaux, mes travaux etc.

Il y a un nav qui contient tout mon menu, une section qui contient le contenu au centre et un <footer> positionné en absolue au bas de la page.

Je voudrais que mon nav soit positionné en fixe complètement en haut à gauche et prenne 100% de la largeur de la page

Je voudrais aussi que <section> prenne l'espace entre mon footer et mon nav

À noter : Ma section a une ID 'section'

Puisque mon nav a une hauteur fixé à auto

Je voulais faire :

function reglerHauteur(){
var nav = document.getElementByTagName('nav');
var hauteur_nav = nav.style.height;
var body =  document.getElementByTagName('body');
var hauteur_body = body.style.height;
var footer =  document.getElementByTagName('body');
var hauteur_footer = body.style.height;
var section = document.getElementById('section') ;
section.style.height = hauteur_body - (hauteur_footer + hauteur_nav);
}
body.addEventListener('load', function(){reglerHauteur()});

Mais ca ne fonctionne pas ...

Y-a t'il une erreur

Ah j'allais oublier, je n'utilises pas de style mais de feuille de style.

MERCI :))))

Balbert

Réponse acceptée

Bonsoir,
La fonction document.getElementByTagName renvoie un tableau contenant les elements cibles.
Donc en gros vous essayez d'acceder à un tableau en lui appliquant les fonctions dedier au element "balise".
Ce qui ne va jamais fonctionné.

Pour corriger cela vous pouvez faire ceci :

function reglerHauteur(){
    // On recuppere le premier element nav s'il y en à plusieurs et pareil pour le body et footer.
    var nav = document.getElementByTagName('nav')[0];
    var hauteur_nav = nav.clientHeight;
    var body =  document.getElementByTagName('body')[0];
    var hauteur_body = body.clientHeight;
    var footer =  document.getElementByTagName('footer')[0];
    var hauteur_footer = footer.clientHeight;
    var section = document.getElementById('section');
    section.style.height = hauteur_body - (hauteur_footer + hauteur_nav);
}
body.addEventListener('load', function(){reglerHauteur()});

Proposition :
La meilleure façon de faire est d'identifié vos balises nav & footer puis appliquer un document.getElementById à la place de
document.getElementByTagName('machin')[0].

Lartak

Bonsoir.
Il te faut le faire en CSS et non en Javascript.

Lens Durandisse2

Auteur

Le problème, c'est que je veux que mon menu prenne une certaine largeur, que le footer prenne une certaine largeur et que la section prenne le reste au centre. Donc j'ai cru qu'avec la ligne

section.style.height = hauteur_body - (hauteur_footer + hauteur_nav);

Cela aurait pu fonctionner non?

Lens Durandisse

Merci de vos réponses et de ton astuce balbert :)

Permettre à une section de prendre l'espace restante

4 réponses