Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.02.2016, 11:51
Аспирант
Отправить личное сообщение для ghost666 Посмотреть профиль Найти все сообщения от ghost666
 
Регистрация: 07.02.2016
Сообщений: 52

задание размера div-у в зависимости от окна браузера
есть такой код:
<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"; а по ширине нет....
подскажите как исправить
Ответить с цитированием
  #2 (permalink)  
Старый 07.02.2016, 12:49
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 03.11.2014
Сообщений: 263

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>

Последний раз редактировалось Mess4me, 07.02.2016 в 12:59.
Ответить с цитированием
  #3 (permalink)  
Старый 07.02.2016, 13:49
Аспирант
Отправить личное сообщение для ghost666 Посмотреть профиль Найти все сообщения от ghost666
 
Регистрация: 07.02.2016
Сообщений: 52

спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 07.02.2016, 14:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

<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>
Ответить с цитированием
  #5 (permalink)  
Старый 07.02.2016, 17:26
Аспирант
Отправить личное сообщение для ghost666 Посмотреть профиль Найти все сообщения от ghost666
 
Регистрация: 07.02.2016
Сообщений: 52

второй способ почему-то не работает в опере...
Ответить с цитированием
  #6 (permalink)  
Старый 07.02.2016, 17:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от ghost666
не работает в опере...
значит не судьба -- что мешает задать проценты и не вычислять ничего width: 50%; height: 95%;
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение размера окна браузера pv! Общие вопросы Javascript 10 29.09.2019 08:45
Отступ в зависимости от высоты окна браузера IndigoHollow jQuery 2 14.10.2015 11:57
Смещение блока при изменении размера окна браузера sedovat Элементы интерфейса 1 07.10.2014 14:51
Смена стилей страницы при изменении размера окна браузера goooooch Javascript под браузер 6 19.11.2011 18:49
Добавление нужного css-файла в html страницу в зависимости от ширины окна браузера UglyDemon Общие вопросы Javascript 1 24.12.2010 10:30