VPF::Растягивающаяся страница с верхним и нижним полями

everyone

Дата 30.4.2013, 12:20 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 218
Регистрация: 24.3.2004

Репутация: нет
Всего: 4

Уже долго бьюсь над проблемой представленной на изображении в прикреплённом к посту файле.

Получилось решить её только таким образом, что постоянно присутствует скролл на странице.

Надеюсь у кого-то есть мысли по этому поводу, или готовый шаблон

Присоединённый файл ( Кол-во скачиваний: 21 )

pattern.png 27,75 Kb

--------------------

Что написал, то написал (Пилат)

botanicula90

Дата 2.5.2013, 10:23 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 1.5.2013

Репутация: нет
Всего: нет

Вот пример:

Код


<html>
    <head>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            #content {
                background-color: green;
                height: 700px;
            }
            
            #footer {
                background-color: white;
                bottom: 0;
                height: 150px;
                left: 0;
                position: fixed;
                width: 100%;
            }

            #footer .content {
                background-color: red;
                bottom: 0;
                height: 100px;
                left: 0;
                position: absolute;
                width: 100%;                
            }
        </style>
    </head>
    <body>
        <div id="content"></div>
        <div id="footer">
            <div class="content"></div>
        </div>
    </body>
</html>

Основной принцип в том, что вся страница верстается как обычная, а контейнер, находящийся в самом низу страницы, прибит к нижней границе окна браузера за счёт свойства position: fixed.

olldman

Дата 2.5.2013, 16:33 (ссылка)

(нет голосов)

Загрузка ...

Дед

Профиль
Группа: Участник
Сообщений: 75
Регистрация: 9.1.2009
Где: Омск

Репутация: 6
Всего: 6

botanicula90 - попробуйте в ваше творение вбить текст и увидите, что советуете галиматью.

everyone - пользуйтесь на здоровье.
На странице специально добавлены раскрывающиеся блоки, дабы было понятно как будет себя вести страница с большим кол-вом текста (блоков с текстом).

everyone

Дата 6.5.2013, 16:18 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 218
Регистрация: 24.3.2004

Репутация: нет
Всего: 4

olldman, Спасибо, но подобное решение у меня было. Если основному блоку (в данном случае класса .div) присвоить верхнее поле (margin-top: 100px; ), то появляется скролл. А этот верхний отступ необходим. Видимо, придётся усложнять топологию страницы.

Я использовал стандартный вариант compass для прибивания футера книзу.

Добавлено @ 16:20
botanicula90, да, olldman прав - немного не то, что нужно )

Это сообщение отредактировал(а) everyone - 6.5.2013, 16:21

--------------------

Что написал, то написал (Пилат)

olldman

Дата 8.5.2013, 08:01 (ссылка)

(нет голосов)

Загрузка ...

Дед

Профиль
Группа: Участник
Сообщений: 75
Регистрация: 9.1.2009
Где: Омск

Репутация: 6
Всего: 6

everyone - Эшо раз пройдите по ссылке, что я дал, дописал для вас немного.

everyone

Дата 13.5.2013, 09:40 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 218
Регистрация: 24.3.2004

Репутация: нет
Всего: 4

olldman, отлично - то, что нужно, и идея понятна

Это сообщение отредактировал(а) everyone - 13.5.2013, 09:40

--------------------

Что написал, то написал (Пилат)

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »