Все та же проблема..

lanzs · May 19, 2009

Опять вопрос про height: 100%, а точнее про то, как сделать так, чтобы везде все работало :blink:

Знаю, что проблема обсуждалась уже многократно, но что-то все никак не выходит, поэтому прошу помощи у тех, кто может помочь

Верстаю сайт, задача: header фиксированный, футер тоже, сайт в высоту страницы, в середине content, у которого, в случае необходимости образовывается scroll. Т.е. хедер и футер всегда на странице, а между ними контент со скролом (если не влазит без него)...

Вот пример того, что получилось (в IE работает как и задумано): http://show.lanzs.ru/7/

В IE все в порядке, в Opere - через js - при загрузке подгоняет размер content`а, а вот с FF ну никак не получается сделать..

Рецепты вроде этого: http://forum.htmlbook.ru/index.php?showtopic=11887 не совсем помогли

Подскажите, как еще возможно это исправить

далее упрощенный код html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Галерея Олега Жогина</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />   
</head>
<body onLoad="he()">
	<div id="main">
		<div id="header">
		 <h1><a href="index.html">Галерея Олега Жогина</a></h1>
		 <div id="lang"><a href="?ru" class="now">ru</a> <a href="?en">en</a> <a href="?es">es</a></div>
		</div>
		<div id="content">

		</div>
		<div id="footer">
		 <h3><a href="contacts.html">контакты</a></h3>
		</div>
	</div>
</body>
</html>

Стиль:

@charset "windows-1251";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
	border: 0;
}

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: white;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: normal;
}
#main {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	background: white;
}

#header {
	height: 82px;	
	border-bottom: 2px #333 solid;
	background: white;
}

#content {
	top: 84px;
	bottom: 60px;   
	*height: expression(parentNode.offsetHeight - 144 + 'px'); 
	overflow: scroll; 
	scrollbar-3dlight-color: #999;	 /* #1: could be changed on white in pair with #3 */
	scrollbar-arrow-color: #999;
	scrollbar-highlight-color: white;  /* #3: could be changed on #999 in pair with #1*/
	scrollbar-face-color: white;
	scrollbar-shadow-color: #999;
	scrollbar-darkshadow-color: white;
	scrollbar-track-color: white;
}

#footer {
	border-top: 2px #333 solid;
	background: white;
}
#clear {
clear: both
}

Searcher · May 19, 2009

как-то кому-то сделал для примера, времени полностью подгонять под задачу нет, но тут почти все, что нужно есть:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>site name</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style>

* {
	margin : 0;
	padding : 0;
	border : 0;
}

html, body {
	width: 100%;
	height:100%;
	overflow: hidden;
}

li {
	list-style-position: inside;
}

#main {
	position: relative;
	width: 80%;
	height: 100%;
	margin: 0 auto;
	border-left: 1px dashed black;
	border-right: 1px dashed black;
}

#header {
	background-color: #FFB;
	height: 100px;
}

#menu {
	background-color: #BFF;
	width: 200px;	
	float: left;
}

#content {
	background-color: #FBF;
	position: absolute;
	top: 100px;
	right: 0;
	bottom: 0;
	left: 200px;
	overflow: auto;
	*height: expression(parentNode.offsetHeight - 100 + 'px');
	*width: expression(parentNode.offsetWidth - 202 + 'px');
}

</style>

</head>
<body>
	<div id="main">
		<div id="header">
			Шапка - каска :)
		</div>
		<div id="menu">
			<p>Меню - шменю</p>
			<ul>
				<li><a href="">пункт 1</a></li>
				<li><a href="">пункт 2</a></li>
				<li><a href="">пункт 3</a></li>
				<li><a href="">пункт 4</a></li>
				<li><a href="">пункт 5</a></li>
				<li><a href="">пункт 6</a></li>
				<li><a href="">пункт 7</a></li>
		</div>
		<div id="content">
			<p>Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент 
			Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент 
			Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент 
			Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент 
			Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент 
			Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент 
			Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент 
			Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент 
			Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент </p>
		</div>
	</div>
</body>
</html>

Основная идея - указываем блоку с контентом, где должна появлятся прокрутка, координаты углов, а не высоту. Этот пример без футера, но футер сюда уже добавить - раз плюнуть. Нужно только указать нижнюю координату другой. И подправить заглушки для ИЕ.

Edited May 20, 2009 by Searcher

Searcher · May 20, 2009

старше 6-го ИЕ должен и без заглушек все понять.

lanzs · May 20, 2009

Спасибо, разобрался

Sign In

Все та же проблема..

Question

lanzs

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

lanzs

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information