Проблема с fixed в IE

byxah · December 7, 2011

Приветствую.

Не могу побороть проблему в IE с фиксированным положением элемента на странице.

(пример http://seotop.pro/photo/folder-2008-2009-peru.html)

Панелька должна прибиваться к низу и держаться там при скролинге и при ресайзе страницы.

Везде естественно кроме IE пашет, прибегать к js для этого не хочется - в IE при пересчете положения панель начинает "скакать" за страницей, выглядит плохо. Поэтому ищу способ через CSS.

Кто знает подскажите методы решения.

Gaspode · December 7, 2011

Да никак оно без скриптов не лечится. По-моему 0_о

Cubka · December 8, 2011

Попробуй вот таким способом (позицию относ. скрола поменяй под свои требования):

* html #fixed-block {
    position: absolute;
    top: expression(eval(document.documentElement.scrollTop) + 100 + 'px');
}

А вот нашёл способ на чистом CSS.

В этом методе position:fixed не будет как такого. Идея состоит в следующем. Сначала мы задаем высоту и ширину 100% для html и body, ставим им overflow:hidden. Затем, делаем блок, который будет «заменой» элемента body. Ставим ему также 100% высоту и ширину, overflow:auto (чтобы появлялись скроллы при необходимости) и position:relative (чтобы внутри этого блока можно было позиционировать другие блоки). А сам блок, которому нужен position:fixed помещаем вне блока-«замены» body, ставим ему абсолютное позиционирование с нужными координатами, и этот блок будет всегда находиться в одном месте экрана, а сам сайт будет прокручиваться внутри блока-«замены». Вот примерный код:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position fixed ie6</title>
<style type="text/css">
html, body {
	width:100%;
	height:100%;
	overflow:hidden;
	padding:0;
	margin:0;
}
#main {
	border:1px solid #666;
	width:100px;
}
#container {
	width:100%;
	height:100%;
	overflow:auto;
	position:relative;
}
.box {
	width:100px;
	height:100px;
	background:#CCC;
	position:absolute;
	right:0;
	top:200px;
}
</style>
</head>
<body>
<div class="box"> block position:fixed </div>
<div id="container">
  <div id="main"> text text text 
 text text text
 text text text
....(добавить сколько нужно для появления скролла)
 text text text
 text text text</div>
</div>
</body>
</html>

Edited December 8, 2011 by Cubka

SelenIT · December 8, 2011

Какой IE и какой доктайп? С нормальным доктайпом во всех IE от 7-го и выше должно работать без ухищрений.

byxah · December 11, 2011

доктайп Transitional

в метатеги прописываю эмуляцию IE8

byxah · December 11, 2011

А вот нашёл способ на чистом CSS.

работает! спасибо огромное

Sign In

Проблема с fixed в IE

Question

byxah

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Gaspode

Link to comment

Share on other sites

Cubka

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

byxah

Link to comment

Share on other sites

byxah

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information