DIV attachée au bas de Viewport

Question

J'ai lu quelques-uns des autres messages sur la façon d'obtenir un DIV à attacher au bas de la fenêtre - et j'ai implémenté une solution avec succès, mais je cours dans un peu d'un problème.

A: http://s222894377.onlinehome.us/

Vous pouvez voir qu'il ya une image étirée à 100% dans un DIV j'ai créé et attaché. Le DIV au-dessus est réglé sur la hauteur: 100%;

Mais cela prend un peu trop d'espace vertical et j'essaie de compenser son effet sur la hauteur totale.

La structure est:

J'ai essayé des variations sur la définition des marges négatives pour les marges supérieure et inférieure et le rembourrage pour compenser la hauteur d'en-tête, mais n'ont pas encore compris .

Si quelqu'un a des suggestions - ce serait très apprécié.

Merci à l'avance,

mm

Answer 1

Si vous essayez de joindre quelque chose au fond de la fenêtre du navigateur et le garder là-bas, peut-être que vous pourriez être intéressé par le CSS position: attribut?

http://www.w3schools.com/Css/css_positioning.asp

Plus précisément, position: fixed; puis spécifiez bottom: 0; pour fixer le fond de quelque chose au bas du navigateur.

Answer 2

Je ne sais pas si je lis correctement votre problème, mais la seule chose qui vient à l'esprit est d'utiliser quelque chose comme:

div#content_block 
{position: absolute; 
top: 3em; /* basically this is 0 + vertical-height of the header; adjust to taste */ 
left: 0; /* assuming you want the div to stretch across the viewport */ 
right: 0; 
bottom: 3em; /* 0 + vertical-height of footer */ 
overflow: auto; 
} 

Mais cela se sent horrible, et je ne peux pas aider mais pensez qu'une meilleure solution pourrait être obtenue avec une meilleure compréhension de votre problème.

Y a-t-il une chance que vous puissiez publier (ou créer un lien vers) une image qui décrit votre mise en page? Avec les marges et les compensations pertinentes ajoutées? Aussi, poster votre code serait une bonne idée (css et html).

Answer 3

Je pense que vous allez rencontrer des problèmes si vous essayez de spécifier une hauteur sur votre div supérieur. Cela devient compliqué et désordonné de le faire de cette façon.

Essayez ceci:

Sur votre div contenu supérieur, ne définissez pas une hauteur; mais définissez bottom-padding à 100px, ou une valeur plus élevée qui permet au div inférieur d'afficher son contenu complet sans chevauchement. De cette façon, votre contenu principal circulera normalement et occupera tout l'espace dont il a besoin, mais il ne sera pas perturbé par le div du bas.