Проблема с расположением блоков

Lithium · February 25, 2013

Добрый день. Столкнулся со следующей проблемой. Не меняя рассположение блоков в коде, "прибить" футер к низу, при том что у блоков динамическая высота и на некоторых страница блока 4 может не быть.

Есть следующий код:


<body>
	 <!--[if lt IE 7]>
		 <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
		 <p></p>
	 <![endif]-->
<div id="container">
	 <header>
		 <strong>0</strong> хеадер
	 </header>
	 <div id="content">
<div class="maintext"><strong>4</strong> Текст описательный (динамическая высота)</div>
		 <div class="firstcoll"><strong>1</strong> Колонка 1 (динамическая высота)</div>
<div class="secondcoll"><strong>2</strong> Колонка 2 (динамическая высота)</div>
<div style="clear:both;"><strong>3</strong> Блок 3 (динамическая высота)</div>
</div>
	 <aside>
		 <strong>5</strong> Lorem ipsum (динамическая высота)
	 </aside>
</div>
	 <footer><strong>6</strong> Футер</footer>
</body>

Стили:


header {
height: 54px;
}
#container {
max-width: 1200px;
min-width: 1000px;
margin: 0 auto;
}
#content {
width: 890px;
position: relative;
float: left;
}
.firstcoll {
width: 430px;
float: left;
}
.secondcoll {
width: 425px;
float: right;
}
.maintext {
width: 890px;
position: absolute;
top: 100%;
}
aside {
float: right;
width: 250px;
}
footer {
clear: both;
}

Sensei · February 25, 2013

http://jsfiddle.net/sensei/zLCGE/

Lithium · February 25, 2013

Вы не поняли немного суть проблемы, акцент сделан на блок maintext.

Edited February 25, 2013 by Lithium

lexxcode · February 25, 2013

Так вам же Sensei уже ответил, по сути остается только заполнить контентом и все. Вот почитайте прижатие футера

Lithium · February 25, 2013

Так вам же Sensei уже ответил, по сути остается только заполнить контентом и все. Вот почитайте прижатие футера

Спасибо за ответ, НО он совершенно не решает суть проблемы. Вы даже не поняли её. Рассмотрите внимательнее код блок maintext уже имеет абсолютное позиционирование, проблема прижать футер уже с имеющими блоками не меняя расположения их в коде, при этом сохранив дизайн. Ещё раз проблема не просто прижать футер, а прижать его с уже имеющим расположением блоков при том что высота их динамическая. Не отвечайте больше элементарные решения, тут проблема глубже, поэтому и ищу здесь ответ, так как возможно тут есть специ или кто сталкивался с этим. Спасибо.

Вот сами исходники, может быть так будет проще понять суть.

Прямая ссылка: http://box.iptel.by/f/69737_169.rar

Edited February 25, 2013 by Lithium

Lithium · February 26, 2013

Видимо никто не в курсе :/

sigma77 · February 26, 2013

Честно говоря вижу только 2 решения:

1) Очевидное - перенести 4 блок вниз по коду

2) Высчитывать его высоту скриптом (если текст изменяется) и добавлять нижний паддинг к контейнеру. При этом не забыть очистить поток.

Sensei · February 26, 2013

как-то так http://jsfiddle.net/sensei/z4sZf/

с прижатым футером http://jsfiddle.net/sensei/z4sZf/1/

Edited February 26, 2013 by Sensei

Lithium · February 26, 2013

как-то так http://jsfiddle.net/sensei/z4sZf/
с прижатым футером http://jsfiddle.net/sensei/z4sZf/1/

Да этот вариат вроде как подходит, спасибо, а что делать если js будет выключен?

С js сразу было ясно что можно реализовать, хотелось бы только css если это возможно.

Edited February 26, 2013 by Lithium

Sensei · February 26, 2013

Очевидное - перенести 4 блок вниз по коду

Lithium · February 26, 2013

Честно говоря вижу только 2 решения:
1) Очевидное - перенести 4 блок вниз по коду
2) Высчитывать его высоту скриптом (если текст изменяется) и добавлять нижний паддинг к контейнеру. При этом не забыть очистить поток.

Перенести это само собой, это вариант на крайний случай если ничего не выйдет.

Скрипт да он решит проблему, но хотелось бы без него

Очевидное - перенести 4 блок вниз по коду

Вот именно что хотелось бы не переносить, но если выхода другого нету то придётся

Ещё конечно вариант <footer></footer> перенести внутарь 4 блока, но я не в курсе что будет с семантикой кода html5 будет ли она нарушена таким образом.

Edited February 26, 2013 by Lithium

Sign In

Проблема с расположением блоков

Question

Link to comment

Share on other sites

10 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

Join the conversation

Similar Content

Обсуждения

Important Information