Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Растягивающаяся страница с верхним и нижним полями 
V
    Опции темы
everyone
  Дата 30.4.2013, 12:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



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

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

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

Присоединённый файл ( Кол-во скачиваний: 21 )
Присоединённый файл  pattern.png 27,75 Kb
--------------------
Что написал, то написал (Пилат)
PM ICQ Skype   Вверх
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.
PM MAIL   Вверх
olldman
Дата 2.5.2013, 16:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Дед
*


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

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



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

everyone - пользуйтесь на здоровье. 
На странице специально добавлены раскрывающиеся блоки, дабы было понятно как будет себя вести страница с большим кол-вом текста (блоков с текстом).
PM MAIL WWW ICQ Skype   Вверх
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
--------------------
Что написал, то написал (Пилат)
PM ICQ Skype   Вверх
olldman
Дата 8.5.2013, 08:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Дед
*


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

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



everyone - Эшо раз пройдите по ссылке, что я дал, дописал для вас немного.
PM MAIL WWW ICQ Skype   Вверх
everyone
Дата 13.5.2013, 09:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



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

Это сообщение отредактировал(а) everyone - 13.5.2013, 09:40
--------------------
Что написал, то написал (Пилат)
PM ICQ Skype   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0681 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.