Wie positioniere ich ein Div in der unteren rechten Ecke eines Browsers?

75

Ich versuche mein Div mit einigen Notizen in der unteren rechten Position des Bildschirms zu platzieren, die jederzeit angezeigt werden.

Ich habe folgendes CSS dafür verwendet:

#foo
{
     position: fixed;
     bottom: 0;
     right: 0;
}

Es funktioniert gut mit Chrome 3 und Firefox 3.6, aber IE8 ist scheiße ...

Was kann eine geeignete Lösung dafür sein?

css cross-browser KoolKabin
quelle
Welchen DOCTYPE verwenden Sie? Denken Sie an IEs "Kompatibilitäts"
-Modi
keine ... welche sollte verwendet werden?
KoolKabin
In Bezug auf Ihren IE6-Kommentar unten versteht IE6 nicht position:fixed;. Sie haben also ein Wrapper-Div, das position:relative;den gesamten Bildschirm ausfüllt, und positionieren dann das gewünschte Div position:absolute;. Wenn Ihre Site jedoch einen Bildlauf nach unten durchführt, müssen Sie CSS-Ausdrücke in IE6 verwenden, damit das Div in der unteren rechten Ecke angedockt bleibt.
Strelok
Danke für die Information. In Bezug auf IE 6 würde ich es besser in Ruhe lassen ...: P wo kann ich diesen CSS-Ausdruck finden
KoolKabin

Antworten:

123

Dieses Snippet funktioniert zumindest in IE7

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test</title>
<style>
  #foo {
    position: fixed;
    bottom: 0;
    right: 0;
  }
</style>
</head>
<body>
  <div id="foo">Hello World</div>
</body>
</html>
sewa
quelle
Warum funktioniert das bei mir nur, wenn ich das " <!DOCTYPE html>" entferne ?
Ashleedawg
14

Ich habe keinen IE8, um dies zu testen, aber ich bin mir ziemlich sicher, dass es funktionieren sollte:

<div class="screen">
   <!-- code -->
   <div class="innerdiv">
      text or other content
   </div>
</div>

und das css:

.screen{
position: relative;
}
.innerdiv {
position: absolute;
bottom: 0;
right: 0;
}

Dies sollte die .innerdiv in der unteren rechten Ecke der .screen-Klasse platzieren. Ich hoffe das hilft :)

Morgoth
quelle
8

Versuche dies:

#foo
{
    position: absolute;
    top: 100%;
    right: 0%;
}
Cipi
quelle
5
Ich denke, das wird die Oberkante unter die Unterkante des übergeordneten Elements machen.
Michael Robinson
100% ist screen.height - element.height.
Cipi