2010-11-19 4 views
0

Dans cet exemple, nous avons un pied de page (très gros) qui est fixé au bas de la page. Lors de la visualisation avec une fenêtre courte, il recouvre l'en-tête et le corps. Y a-t-il un moyen de maintenir le pied de page à une certaine distance minimale du sommet, avec css seulement?une position de pied de page: fixée au fond de la fenêtre, mais avec une limite de hauteur

Vous avez essayé min-height et height sur body et #outW, mais rien n'a d'effet.

http://jsfiddle.net/2XsNH/1/

(déplacer le bas de la fenêtre du navigateur vers le haut pour voir le pied de page jaune était sur l'en-tête)

Répondre

1

désolé si ma description du problème est tombé court, mais ce que je cherchais -

http://ryanfait.com/sticky-footer/

le problème était que mon premier instinct, position:fixed, ne jamais travailler, parce qu'une élément avec positionnement fixe est complètement rompu du flux de documents. Ainsi, la page ci-dessus utilise un tour de marge négatif sur la zone de contenu pour faire de la place pour l'en-tête.

0

Je pense que la seule façon de le faire en CSS pur est de donner le contenu principal un position: relative et un z-index, disons 10, et le pied de page 9.

+0

hmm, donc avec l'intention de faire passer le pied de page _dans l'en-tête? Je cherche à avoir le pied de page "stop" si la fenêtre d'affichage est plus petite que X pixels, donc il ne se heurte pas du tout. – sbeam

+0

@sbeam Je ne peux pas penser à un moyen d'y parvenir en pure CSS. Je ne dis pas que c'est impossible - peut-être avec une utilisation créative d'un parent 'max-height' ... Mais je ne peux pas penser à un –

+0

@sbeam: Si" arrêté "alors où devrait aller le pied de page? Il a une hauteur de 240px et vous voulez qu'il reste 100px par le bas et 100px par le haut. Si la fenêtre est inférieure à 440 pixels, alors que devrait faire le navigateur selon vous? Il ne peut pas concorder avec tous les paramètres et doit casser l'un d'eux, sinon les chiffres ne s'additionnent pas. si vous voulez que ça casse le fond: 100px alors c'est juste un flux régulier de divs avec un h-scrollbar. – Bazzz

Questions connexes