Jump to content
  • 0

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


chtec
 Share

Question

Вот такая простая задачка: нужен слой, чья высота будет равна высоте окна браузера минус определенное число 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...

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

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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

<!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>

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

Link to comment
Share on other sites

  • 0

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

<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>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy