высота div = высота окна браузера - 100px

chtec · July 24, 2008

Вот такая простая задачка: нужен слой, чья высота будет равна высоте окна браузера минус определенное число px.

Скрипт для определения высоты найти не сложно:

function findDimensions(){
   var width = 0, height = 0;								   // переменные с шириной и высотой окна
  if(window.innerWidth){									   // если браузер поддерживает метод window.innerWidth
	width = window.innerWidth;								 // присвоить ширину методом window.innerWidth
	height = window.innerHeight;							   // присвоить высоту методом window.innerWidth
  }															// иначе если браузер не поддерживает метод window.innerWidth,
  else if(document.body && document.body.clientWidth){		 // то если браузер поддерживает объект document.body и метод .clientWidth
	width = document.body.clientWidth;						 // присвоить ширину методом document.body.clientWidth
	height = document.body.clientHeight;					   // присвоить высоту методом document.body.clientWidth
  }
  if(document.documentElement && document.documentElement.clientWidth){ // если поддерживает метод document.documentElement.clientWidth
	width = document.documentElement.clientWidth;			  // присвоить ширину методом document.documentElement.clientWidth
	height = document.documentElement.clientHeight;			// присвоить высоту методом document.documentElement.clientWidth
  }
}

Вопрос в том, как теперь использовать полученный параметр height? Лучше в css или прямо в html?

Еще я видела пример использования expression для этой цели, но это работает только в ie6...

Заранее спасибо за помощь ))

juverman · July 24, 2008

присвой этому слою любой id

<body>
		  <div id="aaa"></div>
</body>

а в свою функцию в конце добавь

var h = document.getElementById("aaa");
if(h)
{
	h.style.height = height - 20 + "px";
}

chtec · July 24, 2008

Вроде выглядит симпатично (извините, я "не в теме"), но почему тогда здесь

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

<html>
<head>
<meta content="text/html; charset=windows-1251" http-equiv="content-type" />

<script type="text/javascript">
function findDimensions(){
   var width = 0, height = 0;								   // переменные с шириной и высотой окна
  if(window.innerWidth){									   // если браузер поддерживает метод window.innerWidth
	width = window.innerWidth;								 // присвоить ширину методом window.innerWidth
	height = window.innerHeight;							   // присвоить высоту методом window.innerWidth
  }															// иначе если браузер не поддерживает метод window.innerWidth,
  else if(document.body && document.body.clientWidth){		 // то если браузер поддерживает объект document.body и метод .clientWidth
	width = document.body.clientWidth;						 // присвоить ширину методом document.body.clientWidth
	height = document.body.clientHeight;					   // присвоить высоту методом document.body.clientWidth
  }
  if(document.documentElement && document.documentElement.clientWidth){ // если поддерживает метод document.documentElement.clientWidth
	width = document.documentElement.clientWidth;			  // присвоить ширину методом document.documentElement.clientWidth
	height = document.documentElement.clientHeight;			// присвоить высоту методом document.documentElement.clientWidth
  }
}

var h = document.getElementById("aaa");
if(h)
{
	h.style.height = height - 20 + "px";
}

</script>

</head>
<body>

<div id="aaa" style="width:500px; border:2px solid #bb0000;"></div>

</body>
</html>

высота получается все равно нулевой?

juverman · July 24, 2008

немного упростил =)

<html>
<head>
<meta content="text/html; charset=windows-1251" http-equiv="content-type" />
<script type="text/javascript">
	function findDimensions()
	{
		var height = 0;
		if(window.innerWidth)
			height = window.innerHeight;
		else if(document.body && document.body.clientWidth)
			height = document.body.clientHeight;
		var h = document.getElementById("layer");
		if(h)
			h.style.height = height - 100 + "px";
	}
	if (window.addEventListener)
		window.addEventListener("load", findDimensions, false);
	else if (window.attachEvent)
		window.attachEvent("onload", findDimensions);
</script>
</head>
<body>
	<div id="layer" style="width:500px; border:2px solid #bb0000;"></div>
</body>
</html>

chtec · July 25, 2008

Работает ))

Спасибо большое!

Sign In

высота div = высота окна браузера - 100px

Question

chtec

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

juverman

Link to comment

Share on other sites

chtec

Link to comment

Share on other sites

juverman

Link to comment

Share on other sites

chtec

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information