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

Mode arborescent

Message précédent Message précédent   Message suivant Message suivant
  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

+ 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