Как "опустить" div?

MIT · April 18, 2009

Необходимо разместить div в самом низу страницы. Задача в общем-то не сложная, но т.к. я не сильно знаком с HTML/CSS не могу реализовать подобную затею.

Вот как пробовал я:

Подход №1 - Position:Absolute

Если данных на странице немного и она вся умещается в окно браузера (скроллбара не появляется), то все замечательно - div (со стилем bottom:0) оказывается в самом низу. Однако если данных на странице много, и страница не умещается в окно браузера, то получается, что div может "болтаться" где-нибудь по-середине страницы.

Подход №2 - размещение в стакане

Если просто поместить этот самый div в конце страницы, то при большом количестве данных он окажется внизу, однако при небольшом - div будет располагаться опять же где-нибудь по-середине страницы.

Подскажите, плиз, есть ли возможность осуществить задуманное?

DjTarik · April 18, 2009

Использовать див-обертку с "порзишн релатив" и внутри него див с "позишн абсолют"...

P.S. А вообще - почитай про прибивание футера к низу...

MIT · April 19, 2009

Перед созданием топика я прочитал две темы, название которых меня заинтересовали (это как раз про прибивание футера и про ширину дива от и до), однако ничего вразумительного для себя так и не нашел.

Про обертку. Насколько я понял ты имеешь в виду что-то типа такого:

<div style="height:500px; background-color:#0000CC">test</div>
<div style="position:relative">
   <div style="position:absolute; bottom:0px; background-color:#0099FF; width:100%;">txt</div>
</div>

Но конкретно этот код работает неверно.

DjTarik · April 19, 2009

А что конктретно в этом коде работает неврно? Див-обертку нужно писать на весь документ... Те сразу после "боди"... Всё остальное - в ней... Работает на 100 процентов везде...

MIT · April 19, 2009

<body>
<div style="position:relative">
   <div style="height:500px; background-color:#0000CC">test</div>
   <div style="position:absolute; bottom:0; background-color:#0099FF; width:100%">txt</div>
</div>
</body>

В Опере и осле 8 выглядит так:

А надо что бы голубая полоска оказалась внизу.

Edited April 19, 2009 by MIT

DjTarik · April 19, 2009

<!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">
	body, html {
		height: 100%;	
	}
</style>

</head>
<body>

	<div style="position: relative; height: 100%; background: #3366FF;">
		<div style="position: absolute; bottom: 0px; left: 0px; height: 100px; width: 100%; background: #FF3399;">
	</div>

</body>
</html>

Что тот вроде этого...

MIT · April 19, 2009

Quote
Что тот вроде этого...

Да не совсем... Наверно я как-то не верно объяснил. Собственно вот схема того, как бы мне хотелось устроить:

А в твоем примере див получается над данными, вторым слоем.

DjTarik · April 19, 2009

MIT said:
Да не совсем... Наверно я как-то не верно объяснил. Собственно вот схема того, как бы мне хотелось устроить:
А в твоем примере див получается над данными, вторым слоем.

В моем примере все ok... Так, как и показано на рисунке... Просто нужно поставить отступ к диву (в котором весь контент)... Отступ равен высоте футера...

MIT · April 19, 2009

Что-то я туплю

Смотри, вот код, содержащий некоторый блок с данными страницы:

<!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">
	body, html {
		height: 100%;	
		padding:0;
		margin:0;
	}
.divbottom {
	background-color: #00CCFF;
}
.divdata {
	background-color: #EEE;
	border: 4px solid #0022FF;
}
</style>

</head>
<body>
	<div style="position: relative; height: 100%; background-color: #f4f4f4"> 
		<div class="divdata" style="height:200px; margin-bottom:100px">data</div>
		<div class="divbottom" style="position: absolute; bottom: 0px; left: 0px; height: 100px; width: 100%">bottom</div>
	</div>

</body>
</html>

Однако выглядит это неверно:

Когда данных мало (нормально)

Однако нижний блок свободно "наезжает" на данные, хотя должен остаться под ними

А если увеличить блок с данными, то возможно такое

Блин, что-то я совсем запутался в этом...

DjTarik · April 19, 2009

MIT said:

Что-то я туплю

Смотри, вот код, содержащий некоторый блок с данными страницы:

<!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">
    body, html {
        height: 100%;    
        padding:0;
        margin:0;
    }
.divbottom {
    background-color: blue;
}
.divdata {
    background-color: red;
}
</style>

</head>
<body>
    <div style="position: relative; min-height: 100%;"> 

	    <div class="divdata" style="padding-bottom: 100px">

		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />v<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

		</div>

		<div class="divbottom" style="position: absolute; bottom: 0px; left: 0px; height: 100px; width: 100%">bottom</div>

	</div>

</body>
</html>

- вместо <br /> - твой текст... Используя минимальную высоту и паддинг, вместо маржина...

MIT · April 19, 2009

Спасибо огромное!

Вот окончательный вид того, что мне требовалось:

<!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">
	body, html {
		height: 100%;	
		padding:0;
		margin:0;
	}
.divbottom {
	background-color: #00CCFF;
}
.divdata {
	background-color: lightgray;
}
</style>

</head>
<body>
	<div style="position: relative; min-height: 100%;"> 

	   <div style="padding-bottom: 100px;">
			<div class="divdata">
			0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17
			</div>
	   </div>
		<div class="divbottom" style="position: absolute; bottom: 0px; left: 0px; height: 100px; width: 100%">bottom</div>

	</div>

</body>
</html>

_______

Один вопрос на последок: а почему этот код нормально работает только в FF?

IE8 отображает его криво (после ресайза окна), однако это скорее всего глюк конкретной версии браузера, т.к. при горизонтальном ресайзе нижний блок встает на положенное место.

А вот Опера 9.61 при небольшом количестве текста "прилепляет" нижний блок прямо под данными.

Edited April 19, 2009 by MIT

DjTarik · April 19, 2009

Про IE8 ничего сказать не могу - нету его у меня, но одно точно - для IE 6 и ниже нужно указывать высоту (т.к. минимальную он не распознает), а в Опере (у меня 9.62) - все норм... Да и в ранних тоже вроде как...

P.S. Не один день пользуюсь этим способом прибивания футера - никогда проблем не было... )

MIT · April 19, 2009

Написал письмо в саппорт Микрософта, может отреагируют.

По поводу Оперы - тоже интересно: верное позиционирование происходит только после горизонтального ресайза, при вертикальном же (а также сразу после загрузки страницы) див может находиться либо под блоком с данными, либо еще где-нибудь. Ладно, обновлю Оперу.

Еще раз спасибо

Nekromancer · April 19, 2009

Quote
Написал письмо в саппорт Микрософта, может отреагируют.

MIT · April 19, 2009

Quote

Позволь узнать, что тебя так развеселило?

а)"Написал"

б)"Написал письмо"

в)"саппорт Микрософта"

г)"Микрософт"

д)"Написал письмо в саппорт Микрософта"

е)"Написал письмо в саппорт Микрософта, может отреагируют."

???

Searcher · April 20, 2009

"может отреагируют."

Justnewone · April 20, 2009

"саппорт Микрософта" тоже смешно.

MIT · April 20, 2009

Да, и правда.

Только я не понял, смешно это или грустно

С адреса CNTUS.FEED.EU.RU.RU.GDT.MOS.CS.T01.CUS.00.EM@css.one.microsoft.com мне пришел ответ, суть которого заключается в том, что сообщить об ошибке в их программном продукте можно только предоставив им свою полную контактную информацию (ФИО, телефон с кодом города, email), сведения о лицензии на это самое программное обеспечение (... или "номер соглашения, а также авторизационный номер лицензиата" ... или ProductID).

Еще указали на то, что оказывается

Quote
Для получения технической поддержки обратитесь по телефонам:
+7 (495) 916-7171 - в Москве,
...
8 800 200-8001 - бесплатный телефон для России.
...
Или по электронной почте:
Russia@microsoft.com
...

(отмечу, что я послал письмо на Russia@microsoft.com)

Короче говоря тупой автоответчик.

Вот теперь даже и не знаю, почему их так недолюбливают?..

Sign In

Как "опустить" div?

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information