problème CSS avec la page de bas de page

J'ai défini mon pied de page dans le fichier css:problème CSS avec la page de bas de page

#footer { 
    position: absolute; 
    height: 50px; 
    text-align: center; 
    background: #66CCCC; 
    bottom: 0px; 
    left: 0px; 
    width: 100%; 
    height: 18px; 
}

Maintenant, si plus de données est ajouté à la page, il se déplace en dessous du pied de page, et le pied de page reste là où il est . Aucun moyen de réparer cela ?

Merci.

Source

2009-11-09 miket

Position d'utilisation: fixe; pour ça.

Source

2009-11-09 14:30:44

C'est le moyen le plus simple de le réparer, mais ce n'est pas supporté dans IE6, malheureusement ... – peirix

Jetez un oeil à http://www.mozilla.org/causes/serviceweek/internethealth/. Bien sûr, vous avez le droit de ne pas être d'accord avec ce qu'ils écrivent, mais je trouve également IE très dégoûtant et je ne le supporte pas. –

Je voulais bien sûr dire IE 6 ... –

N'utilisez pas le positionnement absolu pour les pieds de page, en les attachant à la fenêtre (ce que fait bottom: 0px).

Si vous souhaitez un pied de page en bas de la fenêtre ou le bas du contenu (le plus long des deux), utilisez sticky footers.

Source

2009-11-09 14:31:06

Pourquoi avez-vous 2 définition de la hauteur? Une autre façon est de définir min-height de sorte que sa hauteur peut «croître» avec le contenu tout en ne pas aller moins de certaines hauteurs.

#footer { 
    ..... 
    min-height: 18px; 
}

Source

2009-11-09 14:33:01

Si vous êtes à la recherche purement CSS, vous pouvez effectuer les opérations suivantes:

fichier HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link rel="Stylesheet" href="Site.css" runat="server" rev="Stylesheet" type="text/css" /> 
</head> 
<body> 
    <div id="Page"> 
     <div id="Header"> 
      This is my "Header Content"! 
     </div> 
     <div id="Content"> 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
     </div> 
     <div id="footer"> 
      This is my "Footer Content"! 
     </div>  
    </div> 
</body> 
</html>

CSS (Site.css):

#Page 
{ 
    background-color: Red; 
} 

#Header 
{ 
    background-color: Purple; 
    color: White; 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    top: 0px; 
    height: 75px; 
    font-size: xx-large;  
    text-align: center; 
} 

#Content 
{ 
    background-color: Lime; 
    position: absolute; 
    top: 75px; 
    left: 0px; 
    right: 0px; 
    bottom: 50px; 
    overflow: auto; 
} 

#footer 
{ 
    position: absolute; 
    text-align: center; 
    background: #66CCCC; 
    height: 50px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
}

I bien sûr mettre en place les couleurs et les positions de manière étrange pour montrer où les divs se rencontrent. Lorsque vous ajoutez du contenu à la page, ajoutez-le à la zone de contenu, et puisque nous avons le overflow: auto; pour le contenu div, il défilera et votre en-tête/pied de page sera statique.

Espérons que cela aide!

Source

2009-11-09 15:21:59 Scott

problème CSS avec la page de bas de page

Répondre

Questions connexes