Javascript-форум - css - три ряда в окне, stick'ры

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - css - три ряда в окне, stick'ры (https://javascript.ru/forum/xhtml-html-css/36-css-tri-ryada-v-okne-stick%27ry.html)

css - три ряда в окне, stick'ры

Добрый.
Как сделать так, чтобы окно было разделено на три части, верхняя и нижняя из которых отображались полностью всегда (были бы стикнуты соответсвенно к верху и низу), а средняя была видима настолько, насколько остается места + при скроле всей страницы скролилась бы только средняя часть.
заранее спасибо.

Обычно для этого используются layout-ы..
Типа как
http://www.yui-ext.com/deploy/yui-ex...t/complex.html

Если, конечно, допустимо использовать YUI..

Примерно так...

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Example</title>

<style type="text/css">

* {

        margin: 0;

        padding: 0;

}



#header {

        height: 5em;

        background-color: #ff0000;

        position: fixed;

        top: 0;

        width: 100%;

}



#main {

        margin: 5em 0;

}



#footer {

        position: fixed;

        bottom: 0;

        height: 5em;

        width: 100%;

        background-color: #00ff00;

}

</style>

</head>

<body>

<div id="header">

</div>

<div id="main">

</div>

<div id="footer">

</div>

</body>

</html>

Как всегда работает везде, кроме IE. Для ослика нужен либо жабоскрипт, либо ухищрения со стилями.

layout'ы это хорошо, но здесь нельзя их использовать.
ну а с вариантом fixed хорошо (текст все равно налазит же, и надо делать отсупы для центрового элемента), но от IE никуда не уйти.
попробую писать js, что делать...

Хм, куда там налазит текст? Верний и нижний margin элемента с контентом просто должны быть равны высоте хедера и футера соответственно, а эмуляцию fixed для IE писали на js очень простую.

нижний и верхний элементы могут иметь произвольную высоту, изменяющуюся непредсказуемо.

Ну тогда javascript в помощь :)

вобщем, получилось как-то так:
вроде работает, хотя и не идеально:
1. в ie при скроле топ и боттом элементы колбасит
2. margin центрального элмента задается отдельным javascript'ом (а expression вообще где-то кроме ие работают?)
3. код выглядит весьма уродливо

если кто может подсказать на будущее лучшее решение, - буду благодарен. всем ответившим в топике - большое спасибо.

<html>
<style type="text/css">

#top {
 position: fixed;
 top: 0;
 _position: absolute;
 _top: expression(eval(document.body.scrollTop));
 width: 100%;
 background-color: #fff;
}

#bottom {
 position: fixed;
 bottom: 0;
 _position: absolute;
 _top: expression(document.body.scrollTop + document.body.clientHeight - this.clientHeight);
 width: 100%;
 background-color: #fff;
}

#content {
 margin-top: 50px;
 margin-bottom: 50px;
}
</style>

<body>

	<div id='top'></div>

	<div id='content'></div>

	<div id='bottom'></div>
	<script type="text/javascript">
	document.getElementById("content").style.marginTop = document.getElementById("top").clientHeight;
	document.getElementById("content").style.marginBottom = document.getElementById("bottom").clientHeight;
	</script>
</body>
</html>

у среднего слоя сделать соотв. отступы

а для нижнего-верхнего position: fixed
для для упрямого ie есть соотв. хак (посмотрите реализацию меню на http://xpoint.ru/)

Цитата:

Сообщение от TroT (Сообщение 213)

TroT,
это вы прокоментировали мой код?
хорошим тоном было бы привести код, или хотя бы ссылку на "соотв. хак", избавив пользователей от нужны искать по ужасному xpoint, на котором "реализаций" - тысячи.

nirva,
Думаю это оно

<html>
	<style type="text/css">
	 body {
		margin:0
	}
	#top {
		width:100%;
		height:100px;
		background-color:red
	}
 
	#bottom {
		width:100%;
		height:100px;
		background-color:green;
		position:absolute;
		bottom:0%
	}
 
	</style>
	<body>
  	  <div id='top'></div>
   	 <div id='content'>Здесь какойто-текст</div>
   	 <div id='bottom'></div>
	</body>
</html>

Удачи!