height 100% от родителя

vg2k · September 6, 2012

Здравствуйте, есть проблема с растягиванием элемента по высоте на 100% от родительского. Тема изъезженная, но никак не могу найти оптималього сопосба решения:

Код:


	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html style="height: 100%;">
	<head>
	<title>Untitled</title>
	</head>
	<body style="height: 100%;">


	<table cellpadding="0" cellspacing="0"  border="1" style="background-color: blue; height: 100%; width: 100%;">
		<tr>
			<td style="height: 100%; width: 50%;">
				<table cellpadding="0" cellspacing="0" style="background-color: yellow; height: 100%;">
					<tr>
						<td style="height: 100%;">asss</td>
					</tr>
				</table>
			</td>
			<td>
				<div style="background-color: green; height: 2000px;">
					some dynamic content here
				</div>
			</td>
		</tr>
	</table>

	</body>
	</html>

В зеленом блоке некий контент произвольный, сейчас например на 2000 пикселей.

Во всех нормальных браузерах желтый блок в левой ячейке будет занимать все свободное пространство по вертикали.

Однако в IE (например 9.0) желтый блок занимает высоту равную высоте экрана, каким образом это можной обходить?

у меня из способов обхода нашлось только в такм стиле решение костылем ява-скриптом с добавлением класса height100 к желтому блоку:

jQuery.fn.height100 = function(px) {

jQuery(this).each(function(){

jQuery(this).css('height','auto');

jQuery(this).css('height',jQuery(this).parent().height());

});

return this;

};

jQuery(document).ready(function(){

setTimeout(function(){

jQuery('.height100').height100();

}, 1000);

})

Как можно "по-человечески" это обходить?

Николя223 · September 6, 2012

гдюк какой-то у меня все в норме (до кучи, проверил в средствах разработчика ie 7, ie 8, режим совместимости, все как нужно)

Edited September 6, 2012 by Николя223

Sign In

height 100% от родителя

Question

vg2k

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Николя223

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information