И снова о 100% высоте дивов и подвале снизу.

Pavv323 · March 1, 2010

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

Сразу скажу что прочел тему "Верстка div-ми. Как быть с подвалом?", поглядел макеты которые там приводились по ссылкам. Взял на заметку данный макет http://vk.osvita.org.ua/footer.htm

В данном макете в принципе все хорошо, но вот хотелось бы чтобы Sidebar и Mainbar разтягивались до Footer.

Вот привожу свой код. В принципе в IE и в Opere он работает так как мне нада, но в FF3.6. работает не так как хотелось бы.

Файл index.php

<!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" xml:lang="en">
<head>

	<title>Test</title>

	<meta http-equiv="content-type" content="text/html; charset=utf-8" />

		<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

	</head>
	<body>

		<div class="wrapper">

			<div  id="left"></div>

			<div id="right"></div>

			<div class="push"></div>

		</div>

		<div class="footer">
			Footer
		</div>


		</script>

	</body>
</html>

Файл style.css

* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
}

body {
	text-align: center;
}

.wrapper {
	position: relative;
	width: 100%;
	background: #00ffff;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -40px;
}

.footer, .push {
	height: 40px;
	clear: both;
}

.footer {
	position: relative;
	width: 100%;
	margin: 0 auto;
	background: #ff0000;
}

#left {
	float: left;
	width: 300px;
	min-height: 95%;
	height: 95% !important;
	height: 95%;
	background: #ff00ff;
}

#right {
	float: right;
	width: 300px;
	min-height: 95%;
	height: 95% !important;
	height: 95%;
	background: #0000ff;
}

Результаты работы в IE Opere и FF3.6. приведены на рисунках вложенных.

Рисунки присоеденю позже как только пойму как это сделать.

Вот рисунки

1. Поведение IE 6

2. Поведение Opera

3. Поведение FF36

P.S. Может кто что подскажет. Может дело в доктипах (я просто про них нифига не знаю).

shvv · March 1, 2010

Скорее дело в том, что у родителя левого и правого сайдбара явно не задана высота, поэтому эмулировать колонки при помощи min-height не получится.

Кроме того, у вас в этом случае появляется вертикальная полоса прокрутки даже при отсутствии контента.

Pavv323 · March 1, 2010

2shvv: да я тоже об этом думал, но как обойти эту проблему?

Вы не поверите, сейчас я случайно вообще убрал "доктип" и все стало везде работать одинаково как мне нада. Я просто в шоке если честно. Два дня ломал голову.

вот http://www.mig-ooo.ru/test/index.php

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

Edited March 1, 2010 by Pavv323

shvv · March 1, 2010

2shvv: да я тоже об этом думал, но как обойти эту проблему?
Вы не поверите, сейчас я случайно вообще убрал "доктип" и все стало везде работать одинаково как мне нада. Я просто в шоке если честно. Два дня ломал голову.
вот http://www.mig-ooo.ru/test/index.php
если все же у кого какие идеи будут с доктипом то пишите обязательно. Хотя где то в нете читал что в валидном документе всегда будут проблемы с высотой дивов.

Можно использовать другие способы создания колонок одинаковой высоты.

Тут на форуме немало тем про это.

А вы сами придумали этот метод с min-height или где-то прочитали об этом?

Great Rash · March 1, 2010

Ваш метод создания колонок одинаковой высоты плох. Т.к. высота у вас в процентах, а значит вертикальная полоса прокрутки будет в любом случае. Можете показать скрин того, что надо получить?

Pavv323 · March 1, 2010

идею с min-height почерпнул из интернета, да она вобщем то и не совсем идея, это вариант чтобы работало в современных браузерах. я делал изначально с height: 100% но это не работало в опере и ff. и вот про min-height в нете вычитал.

Что получить нада пока не знаю. Я решил сначала сделать макет, такой как по ссылке http://www.mig-ooo.ru/test/index.php

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

Хотя конечно вы правы со скрул баром не красиво маненько получается. Вобщем я еще в раздумьях. Возможно обращюсь к варианту http://vk.osvita.org.ua/footer.htm

Edited March 1, 2010 by Pavv323

Sign In

И снова о 100% высоте дивов и подвале снизу.

Question

Pavv323

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

shvv

Link to comment

Share on other sites

Pavv323

Link to comment

Share on other sites

shvv

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Pavv323

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information