2013-07-20 3 views
0

Comment laisser manuellement un espace vide en bas d'une page HTML? Mes contenus sont en div et sont positioned:absolutely principalement. J'ai essayé quelques <br> s juste avant </body>. N'a pas fonctionné. J'ai essayé margin-bottom:2cm; sur la div. N'a pas fonctionné.Espace vide à la fin de la page

+0

http://ryanfait.com/sticky-footer/ ou http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page –

Répondre

1

div de positioned absolus sont hors du flux de documents, de sorte que quoi que vous fassiez, n'affectera pas les autres éléments de la page et, par conséquent, margin-bottom échoue aussi, donc ce que vous pouvez faire est d'utiliser un emballage div avec une hauteur de 100%; et que d'utiliser margin-bottom: 2cm; et il travaillera

html, body { 
    height: 100%; 
    background: #f50; 
} 

div { /* Using element selector, you can use ids or classes instead to be specfic*/ 
    height: 100%; 
    margin-bottom: 2cm; 
} 

Demo

+0

merci. J'espère que cela fonctionne. – user2178841

+1

@ user2178841 ça va :) si ce n'est pas le cas, vous devez faire quelque chose de vraiment bizarre .. –

1

Ajouter le CSS suivant dans votre page:

body { 
    margin-bottom: 50px 
} 
+0

c'est quelque chose que j'ai déjà fait et je l'ai mentionné ci-dessus. :) N'a pas fonctionné. – user2178841

+0

Non, cela arrêtera le rendu en arrière-plan si l'arrière-plan est appliqué au corps, mauvaise option, et s'il a besoin d'un élément en dessous de la marge assignée? placerez-vous cela en dehors du corps? J'espère que non –

1

Essayez d'utiliser padding-bottom au lieu de margin-bottom parce que la marge est utilisée pour espacer entre le contenu, le remplissage est l'espacement dans l'élément, ce qui devrait vous donner l'effet que vous recherchez.

Vous pourriez aussi probablement placer une div vide avant </body> aussi comme <div style="height: 200px;"></div>.

+0

Aucun garçon, Le contenu est absolument positionné. C'est pourquoi la div vide ne fonctionnera pas et n'a pas. – user2178841

+0

http://jsfiddle.net/fQnrQ/ –

Questions connexes