Форум

Макс · #1 (**permalink**) 10.08.2008, 01:30

Здравствуйте!
Задача: задать ширину и высоту элемента див по 100% (в IE).
Вопрос: почему в IE, когда я задаю ширину элемента див, он не "растягивается" на 100%. Ширина элемента DIV меньше рабочей области браузера примерно на 25 пикселов, а высота больше на примерно на 100. Почему так происходит?

window.onload = function()  {
    var box = document.createElement("div");
        if(navigator.userAgent.indexOf("MSIE") != -1) {
                if(document.body.clientWidth && document.documentElement) {
                 box.style.width = parseInt(document.body.clientWidth, 10) + "px";
                 box.style.height = parseInt(document.body.clientHeight, 10) + "px";
	         box.style.backgroundColor = "black";
                 box.style.position = "absolute";
                 box.style.left = 0;
                 box.style.top = 0;
                }
        }
        document.body.appendChild(box);
}

Андрей Параничев · #2 (**permalink**) 10.08.2008, 02:11

С этим всегда беда. Можно поступить так, но в XHTML будет только по размерам body (но фактически 100% на 100%), а без спецификации в IE все-равно будет 4px вертикальной прокрутки:

<html>
<head>
	<title></title>
	<style>
		body {
			width: 100%;
			padding: 0px;
			margin: 0px;
		}
		
	</style>
	<script>
		window.onload = function() {
			var div = document.createElement("DIV");
			div.style.width = "100%";
			div.style.backgroundColor = "blue";
			document.body.appendChild(div);
			
			div.style.position = "absolute";
			div.style.top = 0;
			div.style.left = 0;
			div.style.height = document.body.offsetHeight;
		}
	</script>
</head>
<body>
	&nbsp;
</body>
</html>

Макс · #3 (**permalink**) 10.08.2008, 19:26

Андрей, вот код, это то что я хотел, Вы мне помогли

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style>
        body {
            width: 100%;
            height:100%;
            padding: 0px;
            margin: 0px;
        }
 
    </style>
    <script>
        window.onload = function() {
            var div = document.createElement("DIV");
            div.style.width = "100%";
            div.style.backgroundColor = "blue";
            document.body.appendChild(div);
 
            div.style.position = "absolute";
            div.style.top = 0;
            div.style.left = 0;
            div.style.height = "100%";
        }
    </script>
</head>
<body>
    &nbsp;
</body>
</html>

EugenyK · #4 (**permalink**) 01.11.2008, 19:31

Разбирался сегодня с размерами html-объектов. Вот этот момент меня удивил. Ниже полный HTML. Если его запустить, то :

FF3.0 выдаст правильный offsetHeight и правильно посчитает стилевую height (18+5=23)

IE6.0 мало того, что не станет считать стиль и выдаст auto, ещё и врёт на 1px для offsetHeight.

Либо я что-то не учёл?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Title</title>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
	<meta name="robots" content="noindex, nofollow" />
	<style type="text/css">
		body {
			font-size: 11pt;
			margin: 0px;
			padding: 0px;
			}
		.s {
			background: red;
			padding-top: 5px;
			}
	</style>
	<!--[if IE]>
	<style type="text/css">
		html {
			padding: 0px;
			margin: 0px;
			}
	</style>
	<![endif]-->
</head>
<body>
	<div class='s' id='r'>rrr</div>
	<script type='text/javascript'>
		function getCSSVal(elem, prop){
			if (typeof elem != 'object') elem = document.getElementById(elem)

			if(document.defaultView && document.defaultView.getComputedStyle){
				if(prop.match(/[A-Z]/)) prop = prop.replace(/([A-Z])/g, "-$1").toLowerCase()
				return document.defaultView.getComputedStyle(elem, "").getPropertyValue(prop)
			}

			if(elem.currentStyle){ // IE case
				return elem.currentStyle[prop];
			}
			return ''
		}
		var r = document.getElementById('r')
		alert('r.offsetWidth='+r.offsetHeight+' CSSheight='+getCSSVal(r,'height'))
	</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript