web-dev-qa-db-fra.com

HTML/CSS Aligner DIV au bas de la page et de l'écran - selon la première éventualité

J'ai un div:

clear:both;
position:absolute;
bottom:0;
left:0;
background:red;
width:100%;
height:200px;

Et un html, body:

html, body {
    height:100%;
    width:100%;
}


/* Body styles */
body {
    background:url(../images/background.png) top center no-repeat #101010;
    color:#ffffff;
}

Mon code est fondamentalement 20 paragraphes loren ipsum suivis de la div.

Maintenant, j'ai essayé de régler la position relative et absolue, etc.

J'ai essayé de le mettre en mode relatif, mais quand il n'y a pas assez de contenu pour faire défiler la page, la div n'est pas au bas de la page.

J'ai essayé de réparer mais cela vient juste de le réparer .. pas d'utilisation pour moi

Comment puis-je obtenir la div pour être au bas de l'écran et de la page en fonction si theres défiler ou non

htmlcssdomposition
18
Ozzy

Ok, corrigé et fonctionnel: D J'espère que cela fera ce que vous voulez. ... Aperçu ici: http://jsfiddle.net/URbCZ/2/

<html>
    <body style="padding:0;">
        <div style="position:fixed; width:100%; height:70px; background-color:yellow; padding:5px; bottom:0px; ">
            test content :D
        </div>
        <!--Content Here-->
    </div>
    </body>
</html>
46
Craig White

Vous avez besoin d'une solution javascript: une partie fixe et une partie inline ou absolue avec le js à décider. Est-ce que jQuery est une option ici? Voici un screencast: http://jqueryfordesigners.com/fixed-floating-elements/

0
natedavisolds