un autre type de question collante footer

Ma page ... http://webpages.charter.net/jolove/Escort_Folder/test.html un autre type de question collante footer

grâce à: fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css

Maintenant, j'ai un pied de page fonctionnel qui adhère au fond de la fenêtre ..

sauf maintenant ce que je dois faire est de faire en sorte que le bas de page colle au fond avec la hauteur de la zone défilante au-dessus du pied rétrécissant ou se dilatant en fonction de la hauteur de la fenêtre. En d'autres termes, la barre de défilement verticale de la fenêtre ne devrait jamais apparaître.

John

Source

2010-08-14 John Love

Si comprends bien ce que vous essayez de le faire peut être fait en utilisant divs avec des hauteurs de pourcentage. Voici l'idée de base:

<div id="header" style="height: 10%"></div> 

<div id="scrollableContent" style="height: 60%; overflow: auto"></div> 

<div id="footer" style="height: 30%"></div>

en utilisant le pourcentage des hauteurs chaque div redimensionnera en fonction de la taille de la fenêtre et que la div scrollableContent aura une barre de défilement.

Source

2010-08-14 20:24:52

[RESOLU] grâce à tous ceux qui ont répondu. http://webpages.charter.net/jolove/Escort_Folder/test3.html Je ne voulais pas que l'en-tête ou le pied de page change de hauteur, donc je n'ai pas incorporé de% pour l'un ou l'autre. Je ne voulais pas vraiment de% dans le contenu défilant car le bas du contenu défilant ne s'alignait pas * tout à fait avec le haut du pied de page. Donc .. J'ai changé le contenu défilant à la position: absolue; avec un top correspondant: (ht de header) et en bas: (ht of footer). L'en-tête est resté relatif et le pied de page est resté absolu .. et pas laid? barre de défilement de la fenêtre. Merci encore à tout le monde. –

Testé jusqu'à présent sur Mac, pas encore de Windows! N'importe quels preneurs? –

Je ne suis pas sûr si vous souhaitez que ce qui suit juste l'essayer. sur le changement #poemScroller le height:28em;-height:auto;

Source

2010-08-14 22:16:37 Sotiris

Essayé que le résultat que #poemScroller étendu en dessous du #footer. Je * pense * que ce résultat est logique parce que 'auto' n'est pas l'équivalent de 100%. –

vous pouvez utiliser le positionnement statique pour obtenir le même comportement voir cet exemple

<html> 
    <head> 
     <style> 
      #header{ 
       position:fixed; 
       top:0; 
       height:50px; 
       z-index:5; 
       width:100%; 
      } 
      #content{ 
       /* margin top should be >= header height 
        this also applies for footer */ 
       margin: 50px 0; 
       width:100%; 
      } 
      #footer{ 
       position:fixed; 
       bottom:0; 
       height:50px; 
       z-index:5; 
       width:100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="header" > <h1>This is header</h1> </div> 
     <div id="content" > 
      <p>alot of content</p> 
     </div> 
     <div id="footer" > <h1>This is footer</h1> </div> 
    </body> 
</html>

Source

2010-08-14 23:29:42 Barakat

un autre type de question collante footer

Répondre

Questions connexes