it-swarm.com.de

HTML/CSS DIV am unteren Rand von Seite und Bildschirm ausrichten - je nachdem, was zuerst eintritt

Ich habe ein div:

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

Und eine HTML, Körper:

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


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

Mein Code ist im Grunde 20 loren ipsum Absätze, gefolgt vom div.

Jetzt habe ich versucht, die Position auf relativ und absolut und etc zu setzen, aber mit absolut richtet sich das div am unteren Rand des Bildschirms aus

Ich habe versucht, es auf relativ zu setzen, aber wenn der Inhalt nicht ausreicht, um die Seite zu scrollen, befindet sich das div nicht am Ende der Seite.

Ich habe versucht es zu beheben, aber das Problem wurde behoben

Wie kann ich das div am unteren Rand des Bildschirms und der Seite anzeigen lassen, je nachdem, ob es einen Bildlauf gibt oder nicht

18
Ozzy

Ok, behoben und funktioniert: D Hoffe, dass es tut, was Sie wollen . Vorschau hier: 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

Sie benötigen eine Javascript-Lösung: Teil fest und Teil inline oder absolut mit den js zu entscheiden. Ist jQuery hier eine Option? Hier ist ein Screencast: http://jqueryfordesigners.com/fixed-floating-elements/

0
natedavisolds