web-dev-qa-db-fra.com

Comment positionner une div dans le coin inférieur droit d'un navigateur?

J'essaie de placer ma div avec quelques notes dans la position en bas à droite de l'écran qui sera affichée à tout moment.

J'ai utilisé le css suivant pour cela:

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

Cela fonctionne bien avec Chrome 3 et Firefox 3.6 mais IE8 est nul ...

quelle peut être une solution appropriée pour cela?

csscross-browser
64
KoolKabin

Cet extrait fonctionne au moins dans 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>
99
sewa

Je n'ai pas IE8 pour tester cela, mais je suis à peu près sûr que ça devrait marcher:

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

et le css:

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

Cela devrait placer le .innerdiv dans le coin inférieur droit de la classe .screen. J'espère que ça aide :)

8
Morgoth

Essaye ça:

#foo
{
    position: absolute;
    top: 100%;
    right: 0%;
}
6
Cipi