Вход

Просмотр полной версии : задание размера div-у в зависимости от окна браузера

ghost666
07.02.2016, 11:51
есть такой код:
<html>
<head>
<meta content="text/html; charset=windows-1251" http-equiv="content-type" />
<script type="text/javascript">
function findDimensions()
{
var width = document.body.clientWidth;
var height = document.body.clientHeight;
var h = document.getElementById("layer");
var w = document.getElementById("layer");

h.style.height = height - 30 + "px";
w.style.width = width - 500 + "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:1000px; border:2px solid #bb0000;"></div>
</body>
</html>
пролема в том что по высоте размер меняется с помощью h.style.height = height - 30 + "px"; а по ширине нет....
подскажите как исправить
Mess4me
07.02.2016, 12:49
ghost666,

<html>
<head>
<meta content="text/html; charset=windows-1251" http-equiv="content-type" />
<script type="text/javascript">
function findDimensions()
{
var width = document.body.clientWidth;
var height = document.body.clientHeight;
var el = document.getElementById("layer");


el.style.height = height - 30 + "px";
el.style.width = width - 500 + "px";
}
if (window.addEventListener)
window.addEventListener("load", findDimensions, false);
else if (window.attachEvent)
window.attachEvent("onload", findDimensions);
window.onresize = findDimensions;
</script>
</head>
<body>
<div id="layer" style="border:2px solid #bb0000;"></div>
</body>
</html>
ghost666
07.02.2016, 13:49
спасибо!
рони
07.02.2016, 14:07
<style type="text/css">
html,body{
height: 100%;
}
#layer{
border:2px solid #bb0000;
width: calc(100% - 500px);
height: calc(100% - 30px);
}
</style>
<div id="layer" style=""></div>
ghost666
07.02.2016, 17:26
второй способ почему-то не работает в опере...
рони
07.02.2016, 17:31
не работает в опере...
значит не судьба -- что мешает задать проценты и не вычислять ничего width: 50%; height: 95%;