футер к низу через position:absolute и bottom:0px

02.06.2009 09:09

Riim

0

0
Здравствуйте.
Пытаюсь прикрепить футер к низу через position:absolute и bottom:0px .
Есть некоторые проблемы:
1. В IE6 если добавлять текст динамически (javascript-ом), то высота body не пересчитывается. Нашел такое решение: http://forum.htmlbook.ru/index.php?showtopic=14547&pid=101474&mode=threaded&start=#entry101474 , но в нем приходится подстраивать содержание под оформление. Может можно как-то лучше сделать?
2. Опять же в IE6, блоки с float:left всегда выше блоков с position:absolute . Пробовал к float-блоку добавлять position:relative и z-index больший, чем у блока с position:absolute , толку никакого.
3. Ситуация вообще такая: страница тянется на всю ширину окна. Сверху шапка, под ней зафлоаченное влево menu фиксированной ширины. Под menu content с margin-left равным ширине menu. Снизу footer.
Так вот для того что бы footer действительно был снизу, нужно что бы menu не проваливался через body. Тут так и хочется дописать к body overflow:hidden , но делать этого нельзя, и поэтому проходится добавлять еще одну обертку, к которой этот overflow:hidden и дописывается. Т. е. опять же содержание приходится подстраивать под оформление.

Код что бы попробовать (я раскрасил блоки, что бы видно их было):
```
<!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>
	<title>blank</title>
	<style type="text/css">
html, body {
	height: 100%;
	margin: 0;
}

html>body {
	height: auto;
	min-height: 100%;
}

body {
	position: relative;
}

#all {
	width: 100%;
	overflow: hidden;
}

#header {
	width: 100%;
	height: 48px;
	background: #000;
}

#menu {
	width: 290px;
	padding: 50px 0 98px;
	background: #fcc;
	float: left;
}

#content {
	margin-left: 290px;
	padding: 50px 50px 98px 50px;
	background: #cfc;
}

#footer {
	width: 100%;
	height: 48px;
	background: #000;
	position: absolute;
	bottom: 0;
}
	</style>
	<script type="text/javascript">
var toggleText = function(elem) {
	elem = document.getElementById(elem.value);
	elem.innerHTML = elem.innerHTML.length < 1000 ? new Array(2001).join('text ') : 'text';
};
	</script>
</head>
<body>
	<div id="all">
		<div id="header">
			<input type="button" value="menu" onclick="toggleText(this);" />
			<input type="button" value="content" onclick="toggleText(this);" />
		</div>
		<div id="menu">
			text
		</div>
		<div id="content">
			text
		</div>
		<div id="footer">
		</div>
	</div>
</body>
</html>
```

Внимание! Это довольно старый топик, посты в него не попадут в новые, и их никто не увидит. Пишите пост, если хотите просто дополнить топик, а чтобы задать новый вопрос — начните новый.