Aller au contenu

Problème de hauteur en CSS


Developer

Sujets conseillés

Bonjour,

je début en découpage et intégration (X)HTML/CSS.

J'ai un design à découper et à intègrer, alors, afin d'expliquer mon problème j'ai préapré un maquette simple qui me servirai d'exemple pour les explications : https://213.150.161.220/css//w/exemplew.html

Mon problème consiste à :

- Je veux que la partie "contenu" soit extensible verticalement, c'est à dire elle s'aggrandi verticalement tant qu'il y a du texte à ajouter et la partie "footer" doit suivre (descendre plus bas).

J'ai remarqué dans mon code que j'ai la valeur en CSS pour le footer "top:219px;" et pour le contenu "height: 100px;", donc à mon sense c'est tout à fait logique que la partie "footer" ne suit pas l'extension vertical de la partie "contenu".

Comment puis-je résoudre ce problème ?

Merci pour votre aide qui me sera préciseuse et j'espère que j'ai bien expliqué le problème, si vous aurez besoin de plus de détails n'hésitez pas à me le dire.

Je vous souhaite une agréable fin de soirée.

Lien vers le commentaire
Partager sur d’autres sites

Il suffit que tu supprimes le [height:100px;} et le bloc s'adaptera à la taille de ton texte.

Il faut surtout supprimer le "top:219px;". Cette instruction dit de "placer le bloc à 219px du haut de la page", donc forcément il ne bouge pas avec la taille du texte.

Cela dit, ta question est un peu déroutante : ce que tu décris est le comportement naturel du html, autrement dit si tu n'ajoutes aucune CSS, tu obtiendras exactement ce que tu veux.

Tu peux partir du code HTML suivant :

<div id="header">

...

</div>

<div id="content">

...

</div>

<div id="footer">

...

</div>

S'il le faut, tu peux préciser une largeur pour des divs, mais en général, la hauteur est laissée libre en CSS.

Lien vers le commentaire
Partager sur d’autres sites

Il faut surtout supprimer le "top:219px;". Cette instruction dit de "placer le bloc à 219px du haut de la page", donc forcément il ne bouge pas avec la taille du texte.

Cela dit, ta question est un peu déroutante : ce que tu décris est le comportement naturel du html, autrement dit si tu n'ajoutes aucune CSS, tu obtiendras exactement ce que tu veux.

Tu peux partir du code HTML suivant :

<div id="header">

...

</div>

<div id="content">

...

</div>

<div id="footer">

...

</div>

S'il le faut, tu peux préciser une largeur pour des divs, mais en général, la hauteur est laissée libre en CSS.

Merci pour vos réponses.

j'ai supprimés le "top:219px;" et le "height" mais j'aurai dans ce cas le "footer" tout en haut de la page.

vincedo, si tu regardes le code source de la page que j'ai donné tu verra que j'ai employé exactement la même structure des div que tu viens de citer, donc ça changera rien :)

J'ai pensé également que "ne pas donner d'instruction en CSS pour le "top:Xpx" et "height:Xpx;" fera descendre naturellement le footer juste en dessous du bloc contenu selon la hauteur du texte de ce dernier MAIS hélas c'était pas le cas en testant. :blush:

Lien vers le commentaire
Partager sur d’autres sites

j'ai supprimés le "top:219px;" et le "height" mais j'aurai dans ce cas le "footer" tout en haut de la page.

Logiquement non. A moins que lui aussi ne sorte du flux (positionnement absolu par exemple). Sinon, il va sagement se placer à la suite des autres blocs, tranquilement dans le flux courant ;)

De toute façon, employer un positionnement absolu lorsque cela n'est pas absolument nécessaire est assez risqué sauf si l'on maîtrise parfaitement le sujet.

Dans ton cas, ce positionnement est tout à fait inutile.

PS : ah euh au fait : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS :) (voir le 1er modèle et afficher la source)

Modifié par Raphael
Lien vers le commentaire
Partager sur d’autres sites

Logiquement non. A moins que lui aussi ne sorte du flux (positionnement absolu par exemple). Sinon, il va sagement se placer à la suite des autres blocs, tranquilement dans le flux courant ;)

De toute façon, employer un positionnement absolu lorsque cela n'est pas absolument nécessaire est assez risqué sauf si l'on maîtrise parfaitement le sujet.

Dans ton cas, ce positionnement est tout à fait inutile.

PS : ah euh au fait : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS :) (voir le 1er modèle et afficher la source)

Bonsoir,

merci pour ta réponse Raphael, j'ai enregistré tous les modèles afin que je puisse les regarder à tête reposée ;)

ça m'aidera sûrement à résoudre mon problème :)

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...