Etendre un div sur toute la hauteur d'une pag

Question

Bonjour tout le monde.
Je suis en train de développer mon site web, et je cherche a etendre un div sur tout la hauteur de ma page.

http://87.98.161.227:8080/Projet1

Sur ce lien, je voudrais que le corps de ma page (zone blanche) descende jusqu'en bas. Je pense que je n'ai pas les bons mots clés pour chercher sur google, d'où le fait que je pose ma question ici :)

Si vous avez une idée, je ne serais pas contre !
Cordialement,
FunkySayu

Utilisateur anonyme · Accepted Answer

bon pour ton problème c'est un peu délicat, la solution css marche.     
déjà il faut que tu sache où placer le css.     
bon déjà ton site est ainsi:     
répertoires dans la racine :     
-le répertoire donc pointe htt://87.98.161.227:8080 contenant le projet 1     
-le repertoire funkysayu.localhost.cx c'est lui qui contient le css qui nous interresse (custom.css)     
-les répertoires autres ..     

modifions le fichier custom.css      
plus précisément div#visual-portal-wrapper etant la partie centrale( zone blanche) donc tu veux appliquer une nouvelle hauteur      

height:100%;     
/*ceci ne marchera que lorsque cet objet est en position absolut */     
position:absolute;     

et du coup on aura ce que tu veux au niveau de la taille mais il faudra le remettre au centre      
et c'est là que le cours de math commence !     
(largueur fenetre (objet windows) -taille cadre /2 => le recul à faire vers la droite      
dans le dossier projet 1 > dossier Sunburst Theme> fichier javascript :     
jquery-cachekey3546.js     
edition le      
on va creer la fonction fen() (tu l'appelles comme tu veux )     
voici le code à inserer      

function fen(){     
var h=window.screen.width;//largueur de la fenetre     
h=(h-1100)/2;//1100 taille du cadre     
var obj=document.getElementById("visual-portal-wrapper").style.left=h+"px";     
}     


fini reste plus qu'a lancer la fonction au démarrage de la page      
>projet1 >projet.html     
tu entres dans la balise body l'attribut onload="fen()"     
soit     

<body class="template-document_view portaltype-document section-accueil icons-on" dir="ltr" onload="fen()">     


plutôt simple et ça marche bien mais cela peut affecter les éléments à l'intérieur du cadre.     

autre méthode:     
là aucun élément ne sera déplacé dans le cadre mais par contre, la taille du cadre ira au delà de celle de la fenêtre et ceci  sur tous les écrans. Pas tres beau car il y aura un bonne marge entre les écrits et la fin de la page.     

là tu ne modifies pas le fichier custom.css mais tu crées la fonction javascript fen() comme ceci     

function fen(){     
var h=window.screen.height;     
var obj=document.getElementById("visual-portal-wrapper").style.height=h+"px";     
}     

et bien sûr onload="fen()"     

avant de faire toutes ces manipulations je te rappelle que ta page à un style css permettent d'augmenter la taille selon le contenu d'où si tu as assez de quoi mettre dans la page accueil elle sera assez longue pour aller vers le bas.     

PS: tu peux aussi definir une hauteur (h) dans la fonction fen() au lieu de h=window.screen.height;     
un padding-bottom en css et document.body.scrollHeight resolvent aussi le probleme. 

@+

Stéphane18 · Answer

Salut, dans ton cas le plus simple serai de remplir ta page avec du contenu tout simplement, sinon pour donner une hauteur fixe à un bloc tu doit utiliser la propriété height et lui donner une valeur 350px par exemple.

Tu peux aussi ajouter une image de fond blanc.

Utilisateur anonyme · Answer

bah chez moi ton cadre va même au delà de la hauteur de la page, comme quoi cela dépend de la taille de l'écran ou de la hauteur de la fenêtre 

document.body.clientHeight;

récupère la taille de la fenêtre, donc tu peux l'attribuer à ton cadre et éviter l'effet du redimensionnement en prévoyant l'événement

onresize
 
ou tout simplement en css 

height:100%;

et ne pas oublier top:0px;
pour qu'il n'y ait pas de recul vers le bas 

c'est ce dernier que je te propose.
mais par contre il faudra faire attention car la position des éléments à l'intérieur du cadre peut être modifié

SSH-noprobleme · Answer

Oups j'avais oublié que vous répondiez vite sur ce forum...

Bon alors. J'ai testé le height: 100%, mais il ne marche pas. Impossible d'étendre le contenu.
Pour ce qui est d'un fond blanc, je ne peux pas. Car j'ai besoin de l'image de fond comme elle est :/
Ensuite, j'ai pas encore testé le js, mais je vais voir si je peux (cms : plone).

Je vous tient au courant.

Il y a d'autres techniques ?

SSH-noprobleme · Answer

N'ayant jamais bien touché au Js, pourrait tu me donner un code a intégrer s'il te plait ?

Etendre un div sur toute la hauteur d'une pag

5 réponses

Discussions similaires

Newsletters