Фон по высоте уменьшается при недостаточном контенте

[Nailya]

Всем привет!

У меня двухколоночный макет, только вот при недостаточном контенте уменьшается высота фона, а нужно, чтобы высота фона постоянно оставалась от header'a до footer'a?

Подскажите, что можно сделать?

Вот ссылка на скриншот

http://s59.radikal.ru/i163/1308/f7/8494a81e4d2c.png

Вот код:

<div id="container_layout">
	    <div id="main_layout">
		    <div id="all_layout">
			    <div id="header_layout">
				   Header_Layout

			    </div> 

				 <div id="left_block_menu_layout">
					    left_block_menu_layout

				  </div>

				    <div id="content_layout">
							 content_layout
				   </div> 

			    <div id="footer_layout">footer_layout</div>


		    </div> <!--end all_layout-->

	    </div><!--end main_layout-->

    </div> <!--end container_layout-->

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #816c6c;
}

/* Styles for ~/Views/Shared/_Layout.cshtml
———————————————————--*/
#container_layout {
   position: relative;
    min-height: 100%;
    width: 1024px;
    margin: 0 auto -150px;
    background: url(images/bg_left_block_menu.png) repeat-y;
}
#main_layout {

   background: url(images/bg_content_layout.png) repeat-y 100% 0;
}
#all_layout {

   background: url(images/bg_left_block_menu.png) repeat-y;
   overflow: hidden;
   padding: 0 0 150px;
}
#header_layout {
    width: 100%;
    background: rgb(138, 134, 134);
    height: 200px;
}
#left_block_menu_layout {
    width: 250px;
    float: left;
}
#content_layout {

   float: right;
    width: 773px;
}
#footer_layout {
    position:absolute;
    bottom: 0;
    width: 100%;
    background: #5c3f4f;
    height: 150px;
    float: right;
}

[npofopr]

http://design-mania.ru/web-design/html-css/fonsajta-naves-ekran/

http://tutorialzine.com/2012/06/quick-tip-fullscreen-backgrounds/

http://srobbin.com/jquery-plugins/backstretch/

http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/

[Nailya]

ни один вариант не подходит, я знаю, что если поставлю height:100% для #container_layout и min-height: 100% для #main_layout, то фон растянется по высоте, но тогда при переполнении контента, он будет заезжать по footer

[new_user]

ни один вариант не подходит, я знаю, что если поставлю height:100% для #container_layout и min-height: 100% для #main_layout, то фон растянется по высоте, но тогда при переполнении контента, он будет заезжать по footer

В этом случаи нужно поставить нижний padding контейнеру в котором находится текст, велечина падинга должна равнятся высоте футера, у вас она по моему 150px.

[Nailya]

для этого я уже использовала padding: 0 0 150px в #all_layout

Я, возможно, неправильно выразилась, попробую объяснить.

При переполнении, контент заезжает под футер и идет дальше вниз, а футер так и остается в зоне экрана

Здесь скриншот http://s019.radikal.ru/i600/1308/62/791c01926424.png

[121990]

И так. Чтобы адекватно прижать футер к низу документа нужно правильно построить структуру страницы. В твоей верстке футер удален и потока и находится выше всех слоев, паря в небесах. И нафиг ему тогда прижиматься?(:

Внимание! При абсолютном позиционировании элемент всегда располагается относительно родительского контейнера. В нашем случае это html документ. Чтобы это исправить нужно body задать position:relative, тогда footer признает его родителем. При условии если между футером и боди не будет никаких оберток.

После этого зададим высоту html { height: 100% }. а body { min-height: 100% } чтобы боди тянулся на всю ширину окна. и мог вытягиваться за его пределы.

Теперь задаем футеру { postition: absolute, bottom: 0 высоту и т.д } тем самым он прижмется к низу боди (родителю). Кстати, float: left тут вообще не к месту.

Дальше просто оттолкнем содержимое от футера паддингом. z-index'ом поднимем футер чтобы его не перекрывал бэкгрануд боди.

[Nailya]

И так. Чтобы адекватно прижать футер к низу документа нужно правильно построить структуру страницы. В твоей верстке футер удален и потока и находится выше всех слоев, паря в небесах. И нафиг ему тогда прижиматься?(:

Внимание! При абсолютном позиционировании элемент всегда располагается относительно родительского контейнера. В нашем случае это html документ. Чтобы это исправить нужно body задать position:relative, тогда footer признает его родителем. При условии если между футером и боди не будет никаких оберток.

После этого зададим высоту html { height: 100% }. а body { min-height: 100% } чтобы боди тянулся на всю ширину окна. и мог вытягиваться за его пределы.

Теперь задаем футеру { postition: absolute, bottom: 0 высоту и т.д } тем самым он прижмется к низу боди (родителю). Кстати, float: left тут вообще не к месту.

Дальше просто оттолкнем содержимое от футера паддингом. z-index'ом поднимем футер чтобы его не перекрывал бэкгрануд боди.

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

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

[Nailya]

Проблему решила)

добавила еще один див под контейнером #container_layout и в css прописала для этого дива:

position: relative;

min-height:100%;

background: url(images/bg_left_block_menu.png) repeat-y;

И все! Таким образом, фон 2-х колонок растянут по высоте, и футер прибит к низу

[121990]

И все! Таким образом, фон 2-х колонок растянут по высоте, и футер прибит к низу

И почему так произошло?

[Nailya]

вру) не нужно див добавлять, просто в #main_layout добавить две строчки

position: relative;

min-height:100%;

Почему так произошло, сама до конца не могу себе объяснить