Comment ajouter un remplissage au bas du site contenant un img flottant?

Je construis une page web qui a un 'img' flottant dans un div comme élément le plus bas affiché sur la page. La page se termine brusquement au bas de l'image. Pour une belle esthétique je voudrais que l'utilisateur puisse faire défiler juste au-delà de l'image (20px environ). J'ai essayé d'appliquer margin-bottom et padding-bottom à la fois au corps, à un div contenant, et à l'image en question mais en vain.Comment ajouter un remplissage au bas du site contenant un img flottant?

Je n'ai pas, et je ne vais pas essayer de le faire en utilisant html pour ajouter un tampon ou toute autre solution hackish.

La page: http://www.roughgiraffed.com/about.php (s'il vous plaît ne pas nous juger lol, encore très rugueux (jeu de mots) et loin de déploiement)

Nous vous remercions d'avance pour toute aide!

Source

2010-08-10 Zach Lysobey

Ce que vous avez essayé déjà aurait obtenu les résultats souhaités avec le informations fournies. Il doit y avoir d'autres styles au travail qui empêchent cela de fonctionner. – Aaron

Pouvez-vous poster un lien vers le site? Ou un exemple? Ou pastebin.org? – villecoder

Cette image est-elle flottante? J'ai eu des problèmes dans le passé avec des éléments de blocs flottants ayant des marges apparemment ignorées. – PeterL

Essayez d'ajouter overflow: hidden; sur #container. Les flottants prennent les divs .profile hors du flux du document, ce qui fait que le navigateur pense que #container est seulement aussi élevé que le texte général. Définir un débordement réinitialise en quelque sorte cela. Lorsque vous l'avez ajouté, vous pouvez définir une marge sur le conteneur comme vous le feriez normalement.

Source

2010-08-10 23:55:03

Brillant! Cette astuce a fonctionné comme un charme. Pas vraiment sûr pourquoi cela fonctionne, mais c'était exactement ce dont j'avais besoin. –

Je ne le fais pas non plus. Je suis tombé dedans une fois après les âges d'aller à travers des échantillons inutiles. Je ne l'oublierai jamais et j'essayerai de le partager autant que possible pour en sauver d'autres. –

J'ai fait ce qui suit en tant que test et cela fait déborder le corps et montre une barre de défilement verticale. Try it.

<html> 
<body> 
    <div id="container"> 
     <div id="imageContainer" style="padding-bottom:1000px;"> 
     <img src="youImage.jpg"/> 
     </div> 
    </div> 
</body>

En outre, ce qui suit est une approche légèrement différente:

<html style="height: 110%;"> 
<body> 
    <div id="container"> 
     <div id="imageContainer"> 
     <img src="youImage.jpg"/> 
     </div> 
    </div> 
</body>

Source

2010-08-10 23:41:54 Strelok

Merci pour l'effort, mais la première approche est similaire à ce que j'ai essayé (elle échoue dans mon cas) et la seconde ne s'applique pas vraiment à mon cas. –

Peut-être vous avec l'élément portant le titre display: inline?

éléments en ligne ne peuvent pas avoir un rembourrage ou des marges

Source

2010-08-10 23:46:29

Vous devriez pouvoir ajouter marge inférieure à votre étiquette de corps.

body { margin-bottom: 20px; }

Sinon, vous pouvez annonce que la marge inférieure à votre conteneur

<div id="container"> 
    <img src="yourimage.jpg" alt="" /> 
</div> 

#container { margin-bottom: 20px; }

NOTE: les deux méthodes a travaillé lors des tests

Source

2010-08-11 14:13:27 talkingD0G

yup c'est ce que j'ai essayé de faire; problème était lié à une image flottante comme l'élément le plus bas sur la page, je pense. Je suis en train de mettre à jour la question originale pour refléter cela. –

Comment ajouter un remplissage au bas du site contenant un img flottant?

Répondre

Questions connexes