La communauté ALL HTML c'est 58827 membres à ce jour dont 3 inscrits aujourd'hui et 32 depuis une semaine.

  • imprimer
  • aide

Forum de discussions « XHTML - HTML - CSS »

Retrouvez les publications relatives à ces discussions dans nos rubriques CSS, HTML, XHTML.

Height : auto dans un fichier CSS

liste des forums liste des discussions Participer à la discussion

Photo de G-First Message publié le mercredi 03 septembre 2008 à 18 h 25 par G-First.
Bonjour,

Je suis en train de réaliser un site qui contient une en-tête fixe. Dessous se trouve le menu (à gauche) et tout le contenu des pages (à droite). Sur cette partie inférieure se trouve une colonne à gauche sous forme d'image. J'aimerais que cette image prenne toute la hauteur restante. Peu importe si l'image est coupée en bas, mais je ne veux pas qu'il y ait de barre de scroll sur la page. J'avais pensé à appliquer à cet élément une balise height=auto mais ca ne fonctionne pas. A savoir que mon design se trouve entièrement dans un fichier css.

Voici l'ébauche du site, on y voit ce que j'ai pu réaliser :
http://www.c-graphik.fr/c-graphik/

Quelqu'un pourrait-il m'aider?
Merci d'avance.
Photo de DenisBrazz Message publié le jeudi 04 septembre 2008 à 11 h 29 par DenisBrazz. Un conseil, c'est toujours utile, même si on le suit pas Ca peut servir pour plus tard ou donner d'autres idées. Denis
Salut

As-tu essayé avec overflow:
description ici : http://fr.selfhtml.org/css/proprietes/positionnement.htm#overflow

A+
Denis
Photo de G-First Message publié le jeudi 04 septembre 2008 à 16 h 34 par G-First.
Je vais tenter ça merci, je n'y avais pas pensé, et je reviens vous voir....
Photo de G-First Message publié le mardi 09 septembre 2008 à 13 h 51 par G-First.
Me revoilà.

J'ai essayé pas mal de choses, mais malgré toutes les astuces données ici, je n'arrive pas à faire en sorte que mon div prenne toute la hauteur restante de ma page. J'ai appliqué l'overflow mais tant que la balise height ne fonctionne pas comme il faut cela ne sert pas à grand chose

Voici mon code CSS :

----------------------------------------------------------------------------------
#conteneur{
position:absolute;
background:url("images/img_courbes.gif") no-repeat right top;
width:100% ;
height:100% ;
top:0px ;
right:0px ;
border:0px ;
margin:0px ;
}

#haut {
position:absolute;
width:100% ;
height:133px ;
top:0px ;
bottom:0px ;
left:0px ;
right:0px ;
margin:0px ;
border:0px ;
}

#entete {
background:url("images/img_entete.png") no-repeat left;
width:100% ;
height:133px ;
top:0px ;
bottom:0px ;
left:0px ;
right:0px ;
margin:0px ;
border:0px ;
}

#contact {
position:absolute;
float:right ;
background:url("images/img_contact.gif") no-repeat;
width:65px ;
height:65px ;
top:28px ;
right:28px ;
border:0px ;
margin:0px ;
}

#bas{
position:absolute;
float: left;
background:url("images/img_colonne.png") no-repeat left top;
width:100% ;
height:auto !important;
height:400px ;
min-height:400px ;
top:133px ;
right:0px ;
border:0px ;
margin:0px ;
overflow:hidden;
}
----------------------------------------------------------------------------------

Comme vous pouvez le voir, j'ai une en-tête de 133px de hauteur, et dessous un espace que je souhaite amener jusqu'au pied de la page, avec une image de fond que je souhaiterais voir occuper tout cet espace, quitte à être coupée. Mais je n'y arrive pas. En tout cas chez moi, sur Mozilla et IE, ça ne fonctionne pas. J'ai essayé toutes astuces données dans le tutoriel mais ça ne change pas beaucoup, je me dis que j'ai peut-être une faute ailleurs.

Voilà ce que ça donne :
http://www.c-graphik.fr/c-graphik/


Donc si quelqu'un pouvait m'aider, en me disant où j'ai fait une erreur, ce serait formidable. Merci d'avance.
Photo de G-First Message publié le mardi 09 septembre 2008 à 18 h 17 par G-First.
Problème résolu.

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

ACCÉS COMMUNAUTÉ

Rejoignez ALL HTML

Publiez vos articles, actualités, communiqués ... Donnez votre avis, partagez votre réseau, rencontrez d'autres membres et participez à la vie de la communauté.

Les 5 dernières discussions