высота дива по вертикали - всё что осталось на странице

Cueball · September 21, 2009

Привет всем!

Есть задачка - реализовать следующий каркас:

Есть див - 95 px по высоте.

Надо создать под ним второй, который бы занял 100% оставшегося места.

Реализую следующим образом:

<style>

html, body {margin:0; padding:0;}

#one{width: 100%; height:95px;}

#flashcontent{width:100%; height:100%;}

</style>

Но не получается!Див становится 100% относительно <body>(насколько я понимаю). Т.е. появляется скролл!А этого быть не должно!

Ещё одна проблемка кроется в том, что во второй див встраивается флеш элемент, который тоже должен правильно позиционироваться(т.е. он тоже имеет размеры 100% по вертикали и должен чётко растягиваться по диву).

Вот полный код страницы:

<html>

<head>

<title>

Two Divs Test

</title>

<style>

html, body {margin:0; padding:0;}

body{background:url(bg.jpg) no-repeat right #000;}

#wrapper {width:100%; height:100%;}

#one{width: 100%; height:95px;position:relative;}

#flashcontent{position:relative; width:100%; height:auto;}

</style>

</head>

<body>

Links

</div>

Content

</div>

var so = new SWFObject("links.swf", "links", "100%", "100%", "9", "#000000");

so.addParam("wmode", "transparent");

so.addVariable("linkSwitch", "0");

so.write("one");

</script>

var so = new SWFObject("gallery_lingerie.swf", "gallery_lingerie", "100%", "100%", "9", "#000000");

so.addParam("wmode", "transparent");

so.addVariable("galleryIdLink", "0");

so.write("flashcontent");

</script>

</div>

</body>

</html>

Помогите понять в чём трабл, плиз! :blink:

Justnewone · September 21, 2009

Боюсь, в Вашем случае с помощью JS считать сразу разницу и назначать высоту, при ресайзе пересчитывать.

psywalker · September 21, 2009

Cueball

Держи, вариант те накидал, сделаешь под себя: :blink:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{margin:0; padding: 0;}
	html,body { height: 100%; }
		div.wrap { 
			position: relative; 
			min-height: 100%;
			_height: 100%; /* для IE6 */
		}
			div.px { height: 95px; background: red; width: 100px;}
			div.absolut { 
				position: absolute; 
				top: 95px;
				bottom: 0;
				_height: expression(document.body.clientHeight-95+'px'); /* для IE6 */
				width: 100px;
				background: blue;
			}
				div.flash { 
					position: absolute;
					width: 100%; 
					top: 0;
					left: 0;
					bottom: 0; 
					background: yellow;
					_height: expression(document.body.clientHeight-95+'px');  /* для IE6 */
				}

</style>
</head>

<body>
<div class="wrap">
	<div class="px">DIV TOP - 95px</div>
	<div class="absolut">
		DIV absolut - 100%-95px
		<div class="flash">DIV FLASH</div>
	</div>
</div>
</body>
</html>

Edited September 21, 2009 by psywalker

Cueball · September 21, 2009

Всё зашибись!Огромное спасибо, мил Человек! Только вот единственная загвосточка - появляется скролл, который в принципе то и не работает, но создаёт неприятное впечатление лёгкого подёргивания при прокручивании колёсика мыши!И насколько я заметил это появляется тогда, когда подгружается флешка во второй див. Может знаешь с чем это связано?

————————

Ха!Поменял doctype на transitional и глюк пропал!Теперь понять бы почему он появлялся! :blink:

Edited September 21, 2009 by Cueball

psywalker · September 21, 2009

Всё зашибись!Огромное спасибо, мил Человек! Только вот единственная загвосточка - появляется скролл, который в принципе то и не работает, но создаёт неприятное впечатление лёгкого подёргивания при прокручивании колёсика мыши!И насколько я заметил это появляется тогда, когда подгружается флешка во второй див. Может знаешь с чем это связано?
————————
Ха!Поменял doctype на transitional и глюк пропал!Теперь понять бы почему он появлялся!

Не за что дружище, обращайся всегда, а насчёт доктайпа молодец, что сам догадался

Sign In

высота дива по вертикали - всё что осталось на странице

Question

Cueball

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Cueball

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information