Как расстянуть контейнер до подвала?

volse6nik · January 6, 2012

Здравствуйте! Возникла проблема которую не могу решить, вернее не хватает знаний в области css., сам макет делал с помощью всем известного http://csstemplater.com/ и выбрал опцию "прижать футер к подвалу". В результате чего футер прижался, но контейнер так и не расстегнулся до футера. Затем с помощью текстуры решил создать тень по бокам и вот тут и возникла головная боль, пробовал и так и эдак., пожалуйста помогите решить проблему, буду очень признателен.

Edited January 6, 2012 by volse6nik

Gaspode · January 6, 2012

Код покажите.

volse6nik · January 7, 2012

Вот css код, а сам сайт к сожалению пока что на локалке...

* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
body {
	font: 14px/18px Verdana,Geneva,sans-serif;
	height: 100%;
	color: #450000;
	background-image: url(../images/bgbody.jpg); /* теневая текстура размером 1035х5 */
	background-repeat: repeat-y; /* повторение текстуры по вертикали */
	background-position: 50% 0; /* позиция текстуры на 50% по горизонтали и 0 по вертикали */
}
#wrapper {
	width: 1000px;
	margin: 0 auto;
	min-width: 1000px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	border-left: 1px solid #450000;
	border-right: 1px solid #450000;		
}
/* Header
—————————————————————————--*/
#header {
	height: 226px;
	background: #FFF9AE;
}
/* Middle
—————————————————————————--*/
#content {
	padding-top: 20px;
	background-color: #FFF;
}
/* Footer
—————————————————————————--*/
#footer {
	width: 1000px;
	margin: -30px auto 0;
	height: 30px;
	background: #BFF08E;
	position: relative;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #B5985A;
	border-left: 1px solid #450000;
	border-right: 1px solid #450000;
	background-color: #450000;
}

А вот html на всякий, вырезал все лишнее для наглядности...

<body>

<div id="banner"></div><!-- #banner -->

<div id="wrapper">

	<div id="header"></div><!-- #header-->

	<div id="content"></div><!-- #content-->

</div><!-- #wrapper -->

<div id="footer"></div><!-- #footer -->

</body>
</html>

Edited January 7, 2012 by volse6nik

Cerberus · January 7, 2012

* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 14px/18px Verdana,Geneva,sans-serif;
height: 100%;
color: #450000;
background-image: url(../images/bgbody.jpg) repeat-y 50% 0; /* теневая текстура размером 1035х5 */
}
#wrapper {
width: 1000px;
margin: 0 auto;
height: 100%;
border-left: 1px solid #450000;
border-right: 1px solid #450000;
}
/* Header
—————————————————————————--*/
#header {
height: 226px;
background: #FFF9AE;
}
/* Middle
—————————————————————————--*/
#content {
padding-top: 20px;
background-color: #FFF;
height:63%;
}
/* Footer
—————————————————————————--*/
#footer {
width: 1000px;
margin: -30px auto 0;
height: 30px;
background: #BFF08E;
position: relative;
border-top:3px solid #B5985A;
border-left: 1px solid #450000;
border-right: 1px solid #450000;
background-color: #450000;
}

Может быть Вы это имели ввиду?

#content {
padding-top: 20px;
background-color: #FFF;
height:63%;
}

Edited January 7, 2012 by Cerberus

volse6nik · January 7, 2012

немного поторопился с ответом, пытаюсь решить проблему...

Edited January 7, 2012 by volse6nik

Cerberus · January 7, 2012

Спасибо, проблема действительно решилась., для этого было необходимо удалить height: auto !important; из #wrapper и добавить height: 100%; в #content... Вы не могли бы только еще ради интереса пояснить что точно значило height: auto !important; и не использовался ли он для IE? А так всем большое спасибо, можно сказать плюсанул

height: auto !important;

Означает важность объявления, используется для того, чтобы перевесить все остальные объявления (необходимо в том случае, если, например, у пользователя к браузеру прикручена своя таблица стилей). Нет, это не для IE, в смысле не только для IE.

И по-поводу 100% для #content, там возможно надо не 100% ставить, я остановился на 63, так вроде бы страница более нормально отображается (Firefox, Opera).

Gaspode · January 7, 2012

Следите за логикой:

1. IE6 не понимает свойство min-height.

2. свойство height в IE6 работает так же, как min-height в других браузерах.

3. Для всех браузеров мы задаём min-height 100%

4. Чтобы сделать то же самое для IE6 мы задаём height 100%.

5. Чтобы этот height не влиял на другие браузеры, мы пишем height: auto (auto — это значение по умолчанию, буквально означает "минимально необходимая высота") и добавляем !important, чтобы это значение нельзя было переопределить. Однако IE6 из двух значений одного и того же свойства в пределах селектора выбирает последнее, не взирая на important. Отсюда порядок свойств:

min-height: 100%;
height: auto!important;
height: 100%; /*Для IE6 */

В общем-то, проще вынести height: 100% в отдельный селектор специально для IE6, типа такого:

селектор {
   min-height: 100%;
}
* html селектор {
   height: 100%;
}

или вынести стили для IE6 в отдельный файл через условные комментарии. Тогда трюк с auto!important вообще не понадобится.

Edited January 7, 2012 by Gaspode

Cerberus · January 7, 2012

Ещё раз, Вам необходимо content растянуть до footer?

Я правильно понял?

Изменил вот это

#wrapper {
        width: 1000px;
        margin: 0 auto;
        height: 100%;
	height: auto;
        border-left: 1px solid #450000;
        border-right: 1px solid #450000;                
}

и вот это

#footer {
        width: 1000px;
        margin: 0 auto;
        height: 30px;
        background: #BFF08E;
        position: relative;
        border-top:3px solid #B5985A;
        border-left: 1px solid #450000;
        border-right: 1px solid #450000;
        background-color: #450000;
}

volse6nik · January 7, 2012

Ещё раз, Вам необходимо content растянуть до footer?
Я правильно понял?

Совершенно верно, так как если его не растянуть то тогда видна текстура!

volse6nik · January 7, 2012

Cerberus, я попробовал первый код и вроде бы помогло, но при значении height: 63%; для #content сам контент растягивается не до конца подвала, то есть опять остается видимый кусок текстуры, а если использовать height: 100%; то тогда контент даже перелетает подвал. Также нет смысла писать height: 68%; что оптимально для Firefox но вот уже на IE8 уже опять торчит кусок текстуры :unsure:

Edited January 7, 2012 by volse6nik

volse6nik · January 7, 2012

Проблема решена, оказывается достаточно было прописать background-color: #FFF; для #wrapper и визуально результат один и тот же :lol:

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

Обсуждения

Important Information