Bonjour à tous
Dans une de mes pages web, j'ai différents blocs de texte (sous forme de <div>) de hauteur variable et qui sont pilotés dans le xhtml par une fonction hide/show javascript qui permet d'en afficher un tout en masquant les autres. Ces <div> héritent des propriétés d'un conteneur #page que j'ai été obligé de déclarer avec une hauteur fixe de 2500px, soit la hauteur maxi du plus grand de ces <div> pour ne pas empiéter sur le bas de page.
Tout fonctionne correctement sauf l'ajustement du bas de page qui se fait, comme défini dans le conteneur #page, sur le plus grand des <div> et laisse donc un blanc trop important entre la fin du texte et le bas de page pour les autres <div> plus petits. J'aimerais idéalement que le bas de page s'ajuste automatiquement en hauteur de façon dynamique pour chacun de ces blocs et non pas uniquement pour le plus grand.
Ma question : est-il possible de rendre cette ajustement en hauteur automatique ? En d'autres termes, est-il possible de définir la hauteur du conteneur #page non comme une valeur fixe mais comme une variable se référant à la hauteur de chaque bloc affiché. Est-ce techniquement faisable sachant que tous ces <div> sont déclarés et chargés les uns à la suite des autres dans le <body>
Ci-dessous le CSS correspondant :
#page {
position:relative;
min-height:301px;
height:2500px;
width:899px;
font:12px Arial, Helvetica, sans-serif;
padding:10px 0px 0px 50px;
margin:0px;
text-align:justify;
line-height:18px;
color:#000000;
}
#page edito {
position:absolute;
left:50px;
top:55px;
visibility:visible;
z-index:2
}
#part1, #part2, #part3, #part4, #part5, #part6, #part7, #part8, #part9, #part10, #part11, #part12, #part13, #part14, #part15, #part16, #part17, #part18, #part19, #part20, #part21, #part22 {
position:absolute;
left:50px;
top:55px;
visibility:hidden;
z-index:1
}
Si solution il y a, est-elle simple ?
Dans une de mes pages web, j'ai différents blocs de texte (sous forme de <div>) de hauteur variable et qui sont pilotés dans le xhtml par une fonction hide/show javascript qui permet d'en afficher un tout en masquant les autres. Ces <div> héritent des propriétés d'un conteneur #page que j'ai été obligé de déclarer avec une hauteur fixe de 2500px, soit la hauteur maxi du plus grand de ces <div> pour ne pas empiéter sur le bas de page.
Tout fonctionne correctement sauf l'ajustement du bas de page qui se fait, comme défini dans le conteneur #page, sur le plus grand des <div> et laisse donc un blanc trop important entre la fin du texte et le bas de page pour les autres <div> plus petits. J'aimerais idéalement que le bas de page s'ajuste automatiquement en hauteur de façon dynamique pour chacun de ces blocs et non pas uniquement pour le plus grand.
Ma question : est-il possible de rendre cette ajustement en hauteur automatique ? En d'autres termes, est-il possible de définir la hauteur du conteneur #page non comme une valeur fixe mais comme une variable se référant à la hauteur de chaque bloc affiché. Est-ce techniquement faisable sachant que tous ces <div> sont déclarés et chargés les uns à la suite des autres dans le <body>
Ci-dessous le CSS correspondant :
#page {
position:relative;
min-height:301px;
height:2500px;
width:899px;
font:12px Arial, Helvetica, sans-serif;
padding:10px 0px 0px 50px;
margin:0px;
text-align:justify;
line-height:18px;
color:#000000;
}
#page edito {
position:absolute;
left:50px;
top:55px;
visibility:visible;
z-index:2
}
#part1, #part2, #part3, #part4, #part5, #part6, #part7, #part8, #part9, #part10, #part11, #part12, #part13, #part14, #part15, #part16, #part17, #part18, #part19, #part20, #part21, #part22 {
position:absolute;
left:50px;
top:55px;
visibility:hidden;
z-index:1
}
Si solution il y a, est-elle simple ?