Градиент на всю высоту сайта и прижатый к низу футер

@zas · Регистрация: 18.09.2014

Author24 — интернет-сервис помощи студентам

Всем привет. Столкнулся с проблемой при задании body в качестве фона градиента. Все было хорошо пока контент не стал выходить за размеры окна браузера. Проблему решил путем задания html и body min-height:100%. Но после этого столкнулся с другой проблемой не могу сделать прижатый к низу футер, так как если задать html и body не min-height:100%, а height:100% то градиент будет прерываться на размерах экрана.

@ludmila-sv · 19.09.2014, 20:13

CSS

* {margin: 0; padding: 0;}
html, body {min-height:100%;}
body { background: #fefcea; /* Для старых браузров */
          background: linear-gradient(to top, #fefcea, #f1da36);
          position:relative; 
}
 
.footer {position:absolute; bottom: 0; width: 100%; height:100px;}

@zas · 19.09.2014, 21:38 **[ТС]**

ludmila-sv, В Вашем варианте футер прижимается к краю контента, но не к краю экрана.

@ludmila-sv · 20.09.2014, 08:30

Версия вторая, исправленная

HTML5

<html>
 
<head>
<style type="text/css">
* { margin: 0; padding: 0;} 
#table {width: 100%; position: relative; height:100%; display: table;}  
#content { background: red;  width: 100px; padding-bottom: 100px; height:100%; display: table-cell;}  
#footer { background: blue; position: absolute;  bottom: 0; left:0; height: 80px;  width: 100%;}  
#table {background: linear-gradient(to top, #fefcea, #f1da36); }
#content p {height: 800px;}
 
</style>
</head>
 
<body>
 
<div id="table">
<div id="content">
<p>text text text</p>
 
</div>
<div id="footer">
<p>footer footer footer</p>
</div>
</div>
 
 
</body>
 
</html>

Добавлено через 13 минут
#content p {height: 800px;} - для проверки при высоком контенте. Уберите это - убедитесь, что и при коротком контенте работает.

@Дмитрий76 · 20.09.2014, 08:39

Правило min-height: 100%; может использоваться только один раз на странице. При этом все его родители, вплоть до <html>, должны иметь правило height: 100%;
Потом от того блока, который имеет min-height: 100%; надо сделать margin-bottom на высоту футера.

@zas · 20.09.2014, 10:52 **[ТС]**

ludmila-sv, При коротком контенте не работает

@ludmila-sv · 20.09.2014, 13:45

У меня работает.
Что именно у Вас не работает?

@zas 0 / 0 / 0 Регистрация: 18.09.2014 Сообщений: 14
		1
	Градиент на всю высоту сайта и прижатый к низу футер 19.09.2014, 00:08. Показов 1476. Ответов 6 Метки нет (Все метки) Всем привет. Столкнулся с проблемой при задании body в качестве фона градиента. Все было хорошо пока контент не стал выходить за размеры окна браузера. Проблему решил путем задания html и body min-height:100%. Но после этого столкнулся с другой проблемой не могу сделать прижатый к низу футер, так как если задать html и body не min-height:100%, а height:100% то градиент будет прерываться на размерах экрана. 0

@zas 0 / 0 / 0 Регистрация: 18.09.2014 Сообщений: 14
	19.09.2014, 21:38 [ТС]	3
	ludmila-sv, В Вашем варианте футер прижимается к краю контента, но не к краю экрана. 0

@Дмитрий76 8 / 8 / 2 Регистрация: 11.07.2014 Сообщений: 70
	20.09.2014, 08:39	5
	Правило min-height: 100%; может использоваться только один раз на странице. При этом все его родители, вплоть до <html>, должны иметь правило height: 100%; Потом от того блока, который имеет min-height: 100%; надо сделать margin-bottom на высоту футера. 0

@zas 0 / 0 / 0 Регистрация: 18.09.2014 Сообщений: 14
	20.09.2014, 10:52 [ТС]	6
	ludmila-sv, При коротком контенте не работает 0

@ludmila-sv 279 / 279 / 62 Регистрация: 28.08.2014 Сообщений: 432
	20.09.2014, 13:45	7
	У меня работает. Что именно у Вас не работает? Миниатюры 0