Растягивание центрального блока контент до футера

83

l17l

21 января 2015, 11:19

2295

Здравствуйте, хочу растянуть центральный блок где контент до низу футера ! что бы фон растягивался.

Футер я прикрепил к низу.


.nizzpole{

width: 100%;

height:100px;

bottom: 0;

position: absolute;

background:#cccccc;

}

Центральный блок что над футером.


.contentblock{

background: #ffffff;

margin-left: auto;

margin-right: auto;

width: 1100px;

height: 100%;

min-height: 100%;

}

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

Я пробовал скрипт:




function setEqualHeight(columns)  

 {  

 var tallestcolumn = 0;  

 columns.each(  

 function()  

 {  

 currentHeight = $(this).height();  

 if(currentHeight > tallestcolumn)  

 {  

 tallestcolumn  = currentHeight;  

 }  

 }  

 );  

 columns.height(tallestcolumn);  

 }  

$(document).ready(function() {  

 setEqualHeight($(".container  > div"));  

});

Но он проходит на сквозь ! и появляется скрол и приходиться крутить в низ, проходит на сквозь футера.

Вот как щас:

А хочу так:

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

---------- Добавлено 21.01.2015 в 21:23 ----------

Хотя щас то же выходит за футер ! если в центральном блоке информации много будет ! на данный момент я просто для теста бр ставлю и что получилось, что футер по верх, а хотелось бы что бы до начала футера прилегал и если в центральном блоки много информации то свдигал в низ.

---------- Добавлено 21.01.2015 в 21:41 ----------

Вот такой вариант пробовал:

#content {position:relative; min-height:100%;height:auto !important;height:100%;padding:0 80px; color: #646464; text-align: justify;}
#content .empty {height:100px; }
#footer {position:relative; margin-top:-100px; height:90px; width:100%; background:#646464; border-top:10px solid #389DC3}

но он добавляет скрол и поле пустое ! то есть за границы экрана уходит.

---------- Добавлено 21.01.2015 в 22:01 ----------

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

А щас вот так. и то же не так как надо.

L

83

l17l

21 января 2015, 14:05

#1

Нашел еще одно решение

<div id="wrap">
<div style="height: 150px; background:#ccc">верх</div>

<div id="main">

<div class="contr">
контент
</div>

</div>

</div>

<div id="footer">
низ
</div>

Выглядит это так: все ок, растягивается. но есть проблема, блок то центральный не растягивает, который я и хотел растянуть )

42

Jor

21 января 2015, 14:15

#2

Главное высоту футера укажите, и отметьте "прижать футер к низу окна браузера"

P.S. То что у вас на скрине розовым - background для body, белый - для .wrapper

L

83

l17l

22 января 2015, 01:24

#3

Jor:
Главное высоту футера укажите, и отметьте "прижать футер к низу окна браузера"

P.S. То что у вас на скрине розовым - background для body, белый - для .wrapper

Это кросбрайзерная верстка?

Так как бы я то же самое и сделал, но там где на скрине белая полоска, надо что бы до низу была и фон этот розовый был !

Можно реализовать, сделав картинку и от центровать ! что быд о самого низа была ! тогда реально.

Просто на вашем методе если я добавлю по середине блок он так же до низу не будет !

---------- Добавлено 22.01.2015 в 11:30 ----------

Там когда слайдер бар добавляешь, он не до самого низа ) просто можно добавить слайдбар и отцентровать его, я проверил ! но он не до футера !

Реально реализовать можно через картинку ! сделать где розовый фон, длинную в ширину 3000 пикселей и присвоить center, тогда фон до низу будет ))) вот решение. #wrap {min-height: 100%; background:url(werenabg.jpg) center }

154

Joker-jar

22 января 2015, 05:16

#4

Может так? http://jsfiddle.net/hveyp0mj/ В целом принцип, дополнить можно по-всякому.

L

83

l17l

22 января 2015, 13:10

#5

а вот если с телефона смотреть то не до самого низа ! как для телефона сделать? если повернуть тел ! то норма ! а если в длинную то с низу место !

да я нашел решение, через картинку что бы фон до низу был ))) сделал !

---------- Добавлено 22.01.2015 в 23:23 ----------

Все та ки нашел проблему, если сужать сайт, то фон двигается ! как его за стабилизировать !

просто я сделал его под разные мониторы ! 3000px в длину в ширину 45px! а в низ фон дублируется тем самым и до самого футера.

а по середине фона 1100px, белый фон, я от центровал картинку и все ок, но если сужать браузер, то фон уходит ! как бы его за стабилизировать ? что бы центр фона был по центру !

---------- Добавлено 23.01.2015 в 00:03 ----------

Вообще м либо блок центральный сделать до низу как то, до футера, либо картинку от центровать что бы не сдвигалась !

Картинкой я блок центральный де контент ! проливаю по фону белому до футера ) вот такой способ я нашел )

42

Jor

22 января 2015, 14:04

#6

l17l:
Это кросбрайзерная верстка?
Так как бы я то же самое и сделал, но там где на скрине белая полоска, надо что бы до низу была и фон этот розовый был !

Можно реализовать, сделав картинку и от центровать ! что быд о самого низа была ! тогда реально.

Вы уверены что всё правильно сделали?

http://jsfiddle.net/jwjprs8j/

L

83

l17l

23 января 2015, 00:44

#7

Вы наверное меня не понимаете, в центральном блоке тот что до низу, у меня блок по центру в 1100px, вот его до низу растянуть надо.

---------- Добавлено 23.01.2015 в 10:59 ----------

Нашел решение центрирования картинки

background: url(../img/werenabg.jpg) 50% 50% fixed;

Щас во всех брайзерах и на телефоне все гоод.

VK приобрела 70% в структуре компании-разработчика red_mad_robot

Все что нужно знать о DDоS-атаках грамотному менеджеру