Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
esigns
0 / 0 / 0
Регистрация: 15.07.2014
Сообщений: 2
#1

Прижатый подвал + резиновый по высоте блок

15.07.2014, 17:09. Просмотров 831. Ответов 2
Метки нет (Все метки)

Есть верстка прижатого подвала к низу. Все работает хорошо. Но мне нужно в контенте страницы указать высоту баннера в % от высоты экрана. Указывая height: 80% я не вижу никаких изменений.
Как это можно сделать сохранив подвал прижатым к низу?
Код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
    <title>Футер прижат к низу</title>
    <style type="text/css">
        * {margin: 0; padding: 0;} /* обнуляем отступы */
        body {
            background: #fff;}
        html,body {
            height: 100%; /* задаем высоту тела документа */}
        .main { /* основной блок, который должен растянуться до подвала */
            
            min-height: 100%; /* задаем минимальную высоту основного блока */}
        
        .hFooter { /* это распорка в основном блоке - резервируем место для подвала */
            height: 400px; /* высота нашего подвала */}
        .footer { /* подвал */
            background: #0000CC; /* цвет фона подвала (для наглядности) */
            color: #fff;
            height: 200px; /* высота подвала */
            margin-top: -200px; /* делаем отрицательный отступ по высоте равный высоте подвала, чтобы четко вписаться в размер экрана */}
    </style>
</head>
<body>
    <div class="main">
        Это основной блок
        <div style="height:80%; background-color:red">s</div>
        <div class="hFooter"></div>
    </div>
    <div class="footer">Это подвал</div>
</body>
</html>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
15.07.2014, 17:09
Ответы с готовыми решениями:

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

Не могу добавить центральный блок и подвал - они не отображаются
Помогите разобраться с блочной версткой. После того как добавил в левую колонку...

Резиновый средний блок
Господа, добрый день. Не могу решить задачу собственными силами: есть основной...

Резиновый блок из 7 частей
уже пару дней бьюсь и немогу сделать такую конструкцию - далее блоки...

Резиновый блок с текстом
Доброе Время Суток!!! Предложите, пожалуйста решение, у меня пока ничего не...

2
_Я_
16 / 16 / 13
Регистрация: 10.07.2014
Сообщений: 84
15.07.2014, 17:38 #2
блоку с баннером добавь
CSS
1
position: absolute;
подвалу
CSS
1
position: relative;
0
esigns
0 / 0 / 0
Регистрация: 15.07.2014
Сообщений: 2
15.07.2014, 18:15  [ТС] #3
спс
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.07.2014, 18:15

Резиновый центральный блок
Подскажите, какими средствами сделать автоматически изменяемую ширину...

Резиновый левый блок
Здравствуйте, подскажите пожалуйста как сделать до конца страницы левый блок...

Центральный резиновый блок
вот скажем так у меня есть 3 колонки (блока) левый , центральный , правый -...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru