Як розташувати div у правому нижньому куті браузера?

78

Я намагаюся розмістити свій div з деякими нотатками в нижньому правому положенні екрана, які будуть відображатися весь час.

Я використав наступний css для нього:

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

Він чудово працює з Chrome 3 і Firefox 3.6, але IE8 відстій ...

що може бути відповідним рішенням для нього?

css cross-browser

— KoolKabin
джерело

Який DOCTYPE ви використовуєте? Думаючи про режими "сумісності" ІЕ

— sewa

жоден ... який слід використовувати?

— KoolKabin

Щодо вашого коментаря IE6 нижче, IE6 не розуміє position:fixed;. Отже, ви робите обгортковий div, який position:relative;заповнює весь екран, а потім ви розміщуєте потрібний div position:absolute;. Однак якщо ваш сайт прокручується вниз, вам потрібно використовувати вирази CSS в IE6, щоб зберегти div у закріпленому нижньому правому куті.

— Strelok

thnx за інформацію. щодо IE 6 їх мені краще залишити в спокої ...: P де я можу знайти цей вираз css

— KoolKabin

123

Цей фрагмент працює принаймні в 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>

— стоки
джерело

чому це не працює для мене, якщо я не видалю " <!DOCTYPE html>"?

— ashleedawg

14

У мене немає IE8, щоб перевірити це, але я впевнений, що це має спрацювати:

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

та css:

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

Це має розмістити .innerdiv у нижньому правому куті класу .screen. Сподіваюся, це допоможе :)

— Моргот
джерело

9

Спробуйте це:

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

— Cipi
джерело

5

Я думаю, що це зробить верхній край нижче нижнього краю батьківського елемента.

— Michael Robinson

Ні. 100% - це екран. Висота - елемент. Висота.

— Cipi