Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
esigns
0 / 0 / 0
Регистрация: 15.07.2014
Сообщений: 2
#1

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

15.07.2014, 17:09. Просмотров 756. Ответов 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
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Прижатый подвал + резиновый по высоте блок (HTML, CSS):

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

Не могу добавить центральный блок и подвал - они не отображаются - HTML, CSS
Помогите разобраться с блочной версткой. После того как добавил в левую колонку так называемое &quot;сакерфиш&quot; выпадающее меню не могу добавить...

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

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

Резиновый блок из 7 частей - HTML, CSS
уже пару дней бьюсь и немогу сделать такую конструкцию - далее блоки пронумерованы 1 2 3 - 1,3 фиксированы ; 2 резиновый по...

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

2
_Я_
16 / 16 / 11
Регистрация: 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
Привет! Вот еще темы с ответами:

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

Резиновый левый блок - HTML, CSS
Здравствуйте, подскажите пожалуйста как сделать до конца страницы левый блок (menu): Сейчас он имеет длину на которую заполнен.

Резиновый блок с бэкграундом картинкой - HTML, CSS
Реально ли сделать такой блок тянучкой?

Пропорционально резиновый блок div - HTML, CSS
Имеем вот такой код. Хочу сделать чтобы .blackblock изменяли свой размер как по ширене, так по высоте, такое возможно? При данном коде они...


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

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

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