IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

CSS - Site Hauteur 100% - Problème footer.


Sujet :

Dimensionnement en CSS

  1. #1
    Membre Expert Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Par défaut CSS - Site Hauteur 100% - Problème footer.
    Bonjour,

    Un ptit problème de CSS que je n'arrive pas à résoudre.
    Site en ASP.net :
    - Page en hauteur 100% si contenu < taille page avec footer en pied de page (pas de problème).
    - Si contenu > taille page alors le contenu s'aggrandit en hauteur mais le footer reste en pied de page (donc descend pour toujours se placer en dessous du contenu)

    Problème : Si contenu trop grand le footer ne descend pas (cf screenshot)

    Code simplifié (pas de page en ligne) :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
     
    <!-- Container -->
    <div id="container">
     
    	<!-- Header -->
    	<div id="header">...</div>
     
    		<!-- Centre -->
    		<div id="centre">
     
    			<!-- Contenu -->
    			<div id="contenu">
     
    			<!-- Fin Contenu -->	
    			</div>
     
    		<!-- Fin Centre -->	
    		</div>
     
    <!-- Footer -->
    <div id="footer">...</div>

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
     
    /* Container */
    #container {
    position:relative;
    margin:auto;
    width:100%;
    text-align:left;
    min-height:100%;
    background-color:#ADC387;
    }
    /* Header */
    #header { height:234px; width:100%; z-index:0; margin:0; }
    /* Centre */
    #centre { min-height:100%; overflow:auto; padding-bottom:76px; }
    /* Contenu */
    #contenu { width:100%; }
     
    /* Footer */
    #footer {
    position: absolute;		
    bottom: 0; left: 0;
    clear : both;
    width : 100%;
    height : 76px;
    background-color : #CCC;
    }

    Merci pour vos réponses

    EDIT : La page Aspx contient un UserControl chargé via Ajax. Je me demande si le problème ne viendrait pas de là. Car sur d'autres pages, aucun soucis.
    Images attachées Images attachées  
    Pensez à utiliser les ressources disponibles en Dev. Web :
    (x)HTML : Cours (X)HTML / FAQ (X)HTML
    CSS : Cours CSS / FAQ CSS / Galerie CSS
    Javascript : Cours / FAQ / Sources
    Mon site : Développeur Web Freelance

  2. #2
    Membre émérite Avatar de c_s_s
    Profil pro
    Inscrit en
    Juillet 2008
    Messages
    619
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juillet 2008
    Messages : 619
    Par défaut
    Bonjour,

    A quoi sert le float:left; sur #contenu ?

    Sinon, tu as le problème sur plusieurs navigateurs (FF, IE, Opera) ou seulement sur un seul ?

  3. #3
    Membre Expert Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Par défaut
    Citation Envoyé par c_s_s Voir le message
    A quoi sert le float:left; sur #contenu ?
    A rien, autant pour moi, j'ai oublié de l'enlever après plusieurs tests.

    Citation Envoyé par c_s_s Voir le message
    Sinon, tu as le problème sur plusieurs navigateurs (FF, IE, Opera) ou seulement sur un seul ?
    Tous navigateurs.

    En fait, le problème se pose seulement quand dans ma page aspx contient un Grid qui lui-même génère un UserControl en Ajax.
    La page n'ayant pas de rafrachissement, "la structure" du site ne capte pas que la taille du grid a changé (si tu m'as compris) quand l'userControl est ouvert.

    Je pensais sinon, prévoir l'espace au niveau du Grid en laissant la place pour la taille de l'userControl pour que si l'UserControl est ouvert alors j'ai la place prévu pour l'accepter (idem si tu m'as compris )
    Pensez à utiliser les ressources disponibles en Dev. Web :
    (x)HTML : Cours (X)HTML / FAQ (X)HTML
    CSS : Cours CSS / FAQ CSS / Galerie CSS
    Javascript : Cours / FAQ / Sources
    Mon site : Développeur Web Freelance

  4. #4
    Membre émérite Avatar de c_s_s
    Profil pro
    Inscrit en
    Juillet 2008
    Messages
    619
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juillet 2008
    Messages : 619
    Par défaut
    Citation Envoyé par HiRoN Voir le message
    quand dans ma page aspx contient un Grid qui lui-même génère un UserControl en Ajax... (si tu m'as compris)
    C'est du chinois pour moi...

  5. #5
    Membre Expert Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Par défaut
    Citation Envoyé par c_s_s Voir le message
    C'est du chinois pour moi...
    Je m'explique... (enfin je vais essayer)

    Principe :

    MasterPage : Contient le Css de la structure du site.
    Page.aspx : Page du site qui reprend automatiquement la MasterPage et qui affiche son contenu (appelé tel un include si on peut dire au sein de la masterPage).
    DataGrid (pour simplifier) : Tableau ('fin... ) contenant des infos qui en fonction des actions faites par l'utilisateur ouvre un UserControl.
    UserControl : "Mini module" (pour simplifier) qui s'affiche au sein du DataGrid.

    Image 1 : Grid Seul / Image 2 : Grid avec userControl (lorsque l'utilisateur clique sur l'icône "stylo")

    Voila pour les définitions ('fin si on peut dire... )

    Donc en gros, quand l'utilisateur clique sur l'icône "stylo", l'ouverture de l'UserControl se faisant en Ajax (composant télérik), il n'y a pas de rafraichissement de page, du coup, ça donne le problème de base, le footer ne descend pas, car le CSS (si on peut dire ça), ne voit pas que le contenu s'est agrandit.

    Si tu m'as compris... (bis) Difficile à expliquer...

    Pour résumé, comment faire pour que le contenu s'agrandisse en fonction du DataGrid avec userControl ouvert ou non ?

    Dois-je, vu que ça à l'air un peu tendu là, prévoir la place en dessous du Grid pour faire en sorte qu'il y est toujours la place pour l'UserControl (mais donc au load de la page, cela fera un bel espace vide en dessous du grid (quand UserControl fermé) ?
    Images attachées Images attachées   
    Pensez à utiliser les ressources disponibles en Dev. Web :
    (x)HTML : Cours (X)HTML / FAQ (X)HTML
    CSS : Cours CSS / FAQ CSS / Galerie CSS
    Javascript : Cours / FAQ / Sources
    Mon site : Développeur Web Freelance

  6. #6
    Membre Expert Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Par défaut
    N'ayant pas de solution et peu de temps, j'ai finalement remis un footer qui s'ajuste simplement en fonction de la taille du contenu, sans chercher à l'avoir en pied de page si contenu < height 100%...

    Cas de figure un peu particulier... Vive les composants Télérik en ASP.net...
    Pensez à utiliser les ressources disponibles en Dev. Web :
    (x)HTML : Cours (X)HTML / FAQ (X)HTML
    CSS : Cours CSS / FAQ CSS / Galerie CSS
    Javascript : Cours / FAQ / Sources
    Mon site : Développeur Web Freelance

  7. #7
    Membre Expert Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Par défaut
    Salut Hiron,
    si tu souhaites avoir ton footer toujours en bas du veiwport (zone d'affichage),
    tu dois utiliser le positionnement fixe qui au lieu de se baser sur son premier parent positionné, se base sur la zone d'affichage.

    Donc remplace position:absolute par position:fixed sachant que le contenu qui dépasse la hauteur du viewport passera sous le footer.
    Ne pas oublier de trouver une autre solution pour IE6 qui n'implémente pas la valeur fixed.

    Pour mieux apprendre CSS regarde ces tutoriels et cours de formation CSS : http://css.developpez.com/cours/

  8. #8
    Membre Expert Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Par défaut
    Citation Envoyé par Erwan31 Voir le message
    Donc remplace position:absolute par position:fixed sachant que le contenu qui dépasse la hauteur du viewport passera sous le footer.
    Ne pas oublier de trouver une autre solution pour IE6 qui n'implémente pas la valeur fixed.
    Ok Erwan, merci pour la réponse. Je tenterai cela sous peu
    Pensez à utiliser les ressources disponibles en Dev. Web :
    (x)HTML : Cours (X)HTML / FAQ (X)HTML
    CSS : Cours CSS / FAQ CSS / Galerie CSS
    Javascript : Cours / FAQ / Sources
    Mon site : Développeur Web Freelance

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [HTML-CSS] div float 100%, footer pied de page.
    Par Onin42 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 0
    Dernier message: 02/05/2011, 05h07
  2. [HTML] Problème avec DIV, impossible de mettre la hauteur à 100% !!
    Par keyser.greg dans le forum Balisage (X)HTML et validation W3C
    Réponses: 14
    Dernier message: 01/03/2007, 11h46
  3. [HTML][CSS] Hauteur à 100% d'une cellule
    Par daner06 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 03/07/2006, 10h02
  4. Réponses: 3
    Dernier message: 10/05/2006, 10h54
  5. css site mutli design
    Par vodasan dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 10/11/2004, 18h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo