deux colonnes qui s'adaptent à la hauteur de la fenêtre

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • deux colonnes qui s'adaptent à la hauteur de la fenêtre

    Bonjour, la plupart des templates sont faits de façon très conventionnelle : 1 div horizontale, en-dessous 2 ou 3 div selon qu'on veuille 2 ou 3 colonnes, puis 1 div pied de page.

    J'essaie de réaliser un template différent, toujours en div, avec 2 divs qui s'étendent du sommet de la fenêtre à son bottom automatiquement, quelle que soit la hauteur de celle-ci. Ces 2 divs sont plzcées dans un conteneur qui fixe la largeur totale et le positionnement au milieu de la fenêtre.
    Dans la colonne de gauche, il y a 2 div l'une en-dessous de l'autre, l'une avec le logo et un lien vers la page d'accueil, l'autre avec le menu principal.
    La colonne de droite est divisée en 4 : le bandeau, un menu horizontal, l'article et un pied de page.
    J'aimerais que le pied de page reste toujours collé au fond de la fenêtre, par contre, soit bloqué par le contenu de l'article. Je veux dire par là que si l'article fait 600 de haut et que la fenêtre ne fait que 500, il ne faudrait pas que le pied de page vienne se superposer à l'article, donc une hauteur minimale pour la div article.

    J'avais déjà essayé diverses pistes mais c'est toujours décevant quand les pages sont remplies : la colonne de gauche ne descend pas jusqu'en bas, le pied de page vient se coller sur le corps de l'article ...

    bref, si quelqu'un a une petite piste, je lui en serais bien reconnaissant !!!

    Sur Artisteer, je peux faire un template qui prend toute la hauteur automatiquement, mais je ne peux pas le paramétrer pour n'avoir que deux colonnes, et je ne vois pas très bien ce qui marche dans son css ...

    merci d'avance !!!

  • #2
    Re : deux colonnes qui s'adaptent à la hauteur de la fenêtre

    tu utilise quel type de flottement....float:left? ou autre chose?
    Je te suggere d utiliser display:table sur ton conteneur
    et un display:table-cell sur tes deux conteneurs intérieurs...
    Ce n est qu avec display:table-cell que tu peut avoir deux conteneurs dont la hauteur s adapte.
    Met une hauteur minimum min-height égale à la hauteur de ton menu...comme ca si ton contenu est plus grand les deux s adapterons et si il est plus petit il feras au minimum la hauteur de ton menu
    si tu utilise des float:left ou right supprimes les...Avec ce positionnement tu ne peut pas obtenir l effet que tu veux.

    Commentaire


    • #3
      Re : deux colonnes qui s'adaptent à la hauteur de la fenêtre

      bonsoir et merci pour ta réponse.
      Effectivement, j'utilisais des float. Je ne connaissais pas les display et tu m'as sauvé la mise !!!
      Est-ce que ça marche avec IE 6 ?

      Mille mercis encore, je vais enfin pouvoir aller dormir !

      Commentaire


      • #4
        Re : deux colonnes qui s'adaptent à la hauteur de la fenêtre

        Est-ce que ça marche avec IE 6 ?
        IE6 c'est le crétacé, même Microsoft n'en parle plus, si cela ne fonctionne pas ce n'est pas grave, d'ailleurs toutes les librairies js ne fonctionnent pas sur cette antiquité.

        Les personnes visitant avec cette version n'ont cas faire les MàJ vers la 7 ou 8 c'est encore mieux. Tu mets ce plugin sur ton site et au moins les visiteurs seront prévenus.

        Commentaire


        • #5
          Re : deux colonnes qui s'adaptent à la hauteur de la fenêtre

          merci zepelin57, tu as raison, je suis allé voir des stats d'un autre site et effectivement, je ne vois plus beaucoup de IE7.
          Merci à tous les deux et bonne nuit !

          Commentaire


          • #6
            Re : deux colonnes qui s'adaptent à la hauteur de la fenêtre

            IE6 c'est le crétacé, même Microsoft n'en parle plus
            normal apres 10 ans de supports...le seul support qui reste c est des corrections de bugs jusquen 2014...c est le support etendu de microsoft....

            Commentaire

            Annonce

            Réduire
            Aucune annonce pour le moment.

            Partenaire de l'association

            Réduire

            Hébergeur Web PlanetHoster
            Travaille ...
            X