Проблема с float

Riim · May 31, 2009

Пытаюсь прикрепить футер к низу через position:absolute и bottom:0px .

Т. е. положение футера зависит от высоты body. Проблема в том, что блоки с float:left не влияют на эту высоту (для всех кроме IE).

Методом "тыка" удалось выяснить, что если к самому body приписать float:left , то все начинает работать как надо. Но я не знаю нормально ли к body такое приписывать. По крайней мере, нигде этого не встречал.

Четко сформирую вопросы:

1. Можно ли к body приписывать float:left ? Не появятся ли из-за этого потом проблемы?

2. Как обычно поступают в таких случаях (про существование гугла я знаю, но в тех случаях, что мне удалось найти либо футер крепился по-другому, либо не было блоков с float)?

И пример что бы попробовать:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>blank</title>
	<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	position: relative;
	/*float: left;*//* если расскомментировать, то все заработает как надо */
}

#header {
	width: 100%;
	height: 48px;
	background: #000;
}

#menu {
	width: 290px;
	padding: 50px 0px 98px 0px;
	background: #fcc;
	float: left;
}

#content {
	margin-left: 290px;
	padding: 50px 50px 98px 50px;
	background: #cfc;
}

#footer {
	width: 100%;
	height: 48px;
	background: #000;
	position: absolute;
	left: 0px;
	bottom: 0px;
}
	</style>
	<script type="text/javascript">
var toggleText = function(elem) {
	elem = document.getElementById(elem.value);
	elem.innerHTML = elem.innerHTML.length < 1000 ? new Array(2001).join('text ') : 'text';
};
	</script>
</head>
<body>
	<div id="header">
		<input type="button" value="menu" onclick="toggleText(this);" />
		<input type="button" value="content" onclick="toggleText(this);" />
	</div>
	<div id="menu">
		text
	</div>
	<div id="content">
		text
	</div>
	<div id="footer">
	</div>
</body>
</html>

Edited May 31, 2009 by Riim

psywalker · May 31, 2009

Не надо ничё ни на что вешать и изобретать, просто убери с плавающих блоков float: left; и заполни контент текстом, сам всё увидишь, что будет работать:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>blank</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}

html {
height: 100%;
}

body {
min-height: 100%;
height: auto;
position: relative;
}

#header {
width: 100%;
height: 48px;
background: #000;
}

#content {
margin-left: 290px;
padding: 50px 50px 98px 50px;
background: #cfc;

}

#footer {
width: 100%;
height: 48px;
background: #000;
position: absolute;
left: 0px;
bottom: 0px;
}
</style>

</head>
<body>
<div id="header">
<input type="button" value="menu" onclick="toggleText(this);" />
<input type="button" value="content" onclick="toggleText(this);" />
</div>

<div id="content">

</div>
<div id="footer">
</div>
</body>
</html>

А вот тебе от меня способ один, заполни тоже контент текстом не забудь, всё увидишь опять-же:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>blank</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body,html { height: 100%;}
#page { min-height: 100% !important; height: 100%; background: #CF3;}
#footer {height: 30px; background: #F00}

</style>

</head>
<body>
<div id="page">

</div>

<div id="footer">собственно, подвал</div> 
</body>
</html>

Edited May 31, 2009 by psywalker

Riim · May 31, 2009

Не надо ничё ни на что вешать и изобретать, просто убери с плавающих блоков float: left; и заполни контент текстом, сам всё увидишь, что будет работать:

Если бы мне нужно было сделать без меню, то я бы так и сделал.

А с меню у меня получаются 4 варианта:

1. тот, который я привел как пример

2. меню прикрепляется куда надо через position:absolute http://www.sib-fusion.ru/articles_print_10.htm

3. у обоих блоков (menu и content) float:left и ширина в процентах http://xhtml.ru/2005/11/19/simple-layouts/ (но ширина в процентах мне очень не желательна)

4. с отрицательными margin http://www.webmascon.com/topics/coding/43a.asp

И во всех четырех вариантах эта проблема.

А вот тебе от меня способ один, заполни тоже контент текстом не забудь, всё увидишь опять-же:

Эх, если бы все было так просто. В твоем примере при малом количестве содержимого вертикальный скролл виден. Его не должно быть, как в моем примере.

Edited May 31, 2009 by Riim

Riim · June 1, 2009

Всем спасибо. Проблема решена здесь: http://xhtml.ru/forum/viewtopic.php?id=1843

Edited June 1, 2009 by Riim

psywalker · June 1, 2009

решил? ты уверен? а в ИЕ6 ты смотрел, что делается с подвалом при заполнении текстом?

А во вторых почему фон левой колонки не опускается при заполнении правой и наоборот?

Edited June 1, 2009 by psywalker

Searcher · June 1, 2009

для того, чтобы блоки с float влияли на высоту родительского блока, нужно родителю прописать overflow:hidden.

Riim · June 1, 2009

для того, чтобы блоки с float влияли на высоту родительского блока, нужно родителю прописать overflow:hidden.

Для тех кто в танке: с этим все уже понятно, я дал ссылку выше. Вот более точная: http://designformasters.info/posts/clearing-float/

Edited June 1, 2009 by Riim

Riim · June 1, 2009

А во вторых почему фон левой колонки не опускается при заполнении правой и наоборот?

Неужели думаешь, что я сам не заметил. Ссылки, которые дал мне Octane, проблему с фоном идеально разжевывают. Здесь же я подкрасил, что бы видно было. В конечном варианте фона не будет.

а в ИЕ6 ты смотрел?

Да в IE6 явная проблема. Что-то с ходу решить не получается.

Добавлено: Вот такое решение нашлось: http://www.webcocktail.ru/coding/positioni...-at-the-bottom/

Вроде работает, но приходится подстраивать содержание под оформление. Может кто-нибудь решение получше знает?

Edited June 2, 2009 by Riim

Sign In

Проблема с float

Question

Riim

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Riim

Link to comment

Share on other sites

Riim

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Riim

Link to comment

Share on other sites

Riim

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information