Footer в Chrome

gorda · July 12, 2012

Здравствуйте, я учусь html5 и css (сама не поняла еще 2.1 или третьему). Стараюсь основательно разбираться во всем, и обходиться без "хаков и распорок".

Упражнялась в разметке страницы

html:

<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Лабораторная 2.3</title>
<link rel=stylesheet href=3.css>
</head>
  <body>
		<div id=wrap>
		  	<header>Верхний блок</header>
			<nav>Навигация<br>Навигация<br>Навигация</nav>
			<article>
			<p>Таким образом новая модель организационной деятельности представляет собой интересный
			эксперимент проверки форм развития. Товарищи! новая модель организационной деятельности
			способствует подготовки и реализации существенных финансовых и административных условий.
			Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение нашей
			деятельности представляет собой интересный эксперимент проверки дальнейших направлений развития.</p>
			<p>Задача организации, в особенности же новая модель организационной деятельности позволяет
			оценить значение модели развития. Товарищи! начало повседневной работы по формированию позиции
			представляет собой интересный эксперимент проверки новых предложений. Таким образом консультация
			с широким активом требуют от нас анализа позиций, занимаемых участниками в отношении поставленных
			задач. Товарищи! рамки и место обучения кадров в значительной степени обуславливает создание
			направлений прогрессивного развития. Разнообразный и богатый опыт сложившаяся структура
			организации требуют от нас анализа модели развития.</p>
			</article>
			<aside>Aside<br>Разделы<br>Архивы</aside>
		</div>
		<footer>Нижний блок</footer>
  </body>

</html>

css:

html,
body{
margin: 0;
padding: 0;
height: 100%;
}

#wrap { min-height: 100%; margin: 0 auto; width: 700px; background: #eeeeee;}

header{
background: #f65a4f;
height: 60px;
}
nav{
background: #fad923;
float: left;
width: 20%;
}
article{
background: #04b4d7;
float:left;
width: 55%;
}
aside{
background: #fad923;
float: right;
width: 25%;
}
footer{
background: #56b650;
position: relative;
margin-top: -60px;
height: 60px;
width: 100%;
clear: both;
}

Не могу понять следующую проблему: в FF11, IE9 у меня футер отображает как я и хотела. А вот в Chrome 20.0 футер "наплывает" на текст снизу. Если я пытаюсь сделать padding: 0 0 60 0; для wrap, то футер снова проваливается за экран

и на счет синтаксиса, я так и не поняла нужно ставить кавычки или нет у значений в html? кажется это из xhtml, а в html5 этого не нужно... или я что-то напутала опять.

mfred · July 13, 2012

в #wrap добавить overflow: hidden; в footer убрать margin-top: -60px;

Edited July 13, 2012 by mfred

Yazon_Nile · July 13, 2012

mfred ,

не советуйте чушь.

Автор хочет сделать footer at bottom.

Пара замечаний по шаблону.

1 - У вас три флотнутых елемента без обертки. Было бы логично article, nav и aside завернуть в див с overflow:hidden.

2 - ///Если я пытаюсь сделать padding: 0 0 60 0; для wrap, то футер снова проваливается за экран ///

Все верно! У него же стоит min-heigth:100%. Т.е у этого дива высота высчитывается по формуле: 100% + 60пк. Ну, и посмкольку 100% это и есть высота екрана - то футер вываливается на 60 пикселей под екран.

margin-top: -60px на футере подтягивает его к самой границе. Но не выше.

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

http://jsfiddle.net/xzG8t/5/

Edited July 13, 2012 by Yazon_Nile

Sign In

Footer в Chrome

Question

gorda

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

mfred

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information