Problème avec le pied de page css

J'ai un problème avec une page Web. J'utilise la propriété min-height pour placer le pied de page en bas de la page (si le contenu n'est pas assez long) et après le contenu (si le contenu est plus long que la fenêtre). Il y a beaucoup de tutoriels qui décrivent cette méthode et moi aussi je l'ai fait de cette façon.Problème avec le pied de page css

html, body { height: 100%; } 
.container { 
    min-height: 100%; 
    position: relative; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
}

et un autre code. Cela fonctionne bien alors.

Le problème se produit lorsque je crée deux divs supplémentaires pour ajouter des ombres portées au conteneur div. J'ai:

<div class="left-shadow"> 
    <div class="right-shadow"> 
     <div class="container"> 
     ... 
     </div> 
    </div> 
<div>

Je figurés html et la hauteur du corps restent 100%, div gauche ombre a min-hauteur de 100%, et droit ombre et de conteneurs ont une hauteur de 100% (je suppose que la 100% signifiera 100% de la hauteur de l'élément parent).

Cependant, cela ne fonctionne pas (dans Firefox, cela fonctionne dans Chrome, je ne me soucie pas vraiment d'IE), et j'ai essayé toutes sortes de combinaisons pour bien faire les choses, mais en vain. Toute aide serait appréciée.

EDIT: (code partiel)

<html> 
    <head> 
    ... 
    </head> 
    <body> 
     <div class="left-shadow"> 
      <div class="right-shadow"> 
       <div class="container"> 

        <div class="header"> 
         header content 
        </div> 

        <div class="content" > 
         content goes here 
        </div> 


        <div class="footer"> 
         footer content here 
        </div> 


       </div> <!-- end container div --> 
      </div> 
     </div> 
    </body> 
</html>

Et le css concerné:

html { 
    overflow-y: scroll; 
    height: 100%; 
} 

body { 
    margin: 0 0 0 0; 
    height:100%; 
} 

.left-shadow 
{ 
    width: 1084px; 
    background: url("images/left-shadow.png") repeat-y left; 
    /* both bg images are 30px wide. 1024 + 30 + 30 = 1084px */ 
    margin: auto; 
    min-height: 100%; 
} 

.right-shadow 
{ 
    width: inherit; 
    background: url("images/right-shadow.png") repeat-y right; 
    margin: auto; 
    height: 100%; 
} 


.container { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 0; 
    width: 1024px; 
    height: 100%; 
}

EDIT 2: Je viens de découvrir que cette question appartient à doctype. À partir de maintenant, je poserai des questions au bon endroit. Mais puisque c'est déjà fini, je demanderais que les gens répondent de toute façon sans entrer dans où les questions devraient être postées. Merci.

Source

2010-01-20 ladaghini

Une chance de voir le code de vos ombres? Ma conjecture est qu'ils sont placés abolument et que le conteneur est donc placé en fonction de ces éléments. De plus, vous devez probablement définir min hauteur/hauteur pour les ombres car il ne sera pas hérité. – David

Tout d'abord, pour créer un effet d'ombre, utilisez CSS. Si la solution CSS n'est pas ce que vous cherchez alors peut-être essayer de définir une ombre comme image de fond de .container. En ce moment votre mark-up est surchargé par des éléments inutiles.

Mais si ce supplément majoration est la seule façon de faire ce que vous voulez faire, essayez quelque chose comme ceci:

* { 
    margin: 0; 
    padding: 0; 
} 

html, body, .shadow, #container { 
    min-height: 100%; 
} 

#container { 
    position: relative; 
} 

#content { 
    padding-bottom: 55px; 
} 

#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 50px; 

    background: #0a0; 
}

Et balisage HTML (ces ombre divs font paraître terrible):

<body> 
    <div id="shadow-left" class="shadow"> 
     <div id="shadow-right" class="shadow"> 
      <div id="container"> 
       <div id="content"> 
        Page contents 
       </div> 
       <div id="footer"> 
        Footer 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

Source

2010-01-20 21:53:44 Crozin

Je recommande vraiment d'utiliser cette solution simple pour un "pied collant" à la place. Il suffit de se débarrasser des problèmes: http://ryanfait.com/sticky-footer/

Tout ce dont vous avez besoin est de pouvoir définir une hauteur fixe pour votre pied de page, ce qui ne devrait poser aucun problème dans pratiquement tous les cas.

Fonctionne dans tous les navigateurs courants!

Source

2010-01-20 23:05:37 Tom

Répondre

Questions connexes