Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Растягивающаяся страница с верхним и нижним полями

Автор: everyone 30.4.2013, 12:20

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

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

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

Автор: botanicula90 2.5.2013, 10:23

Вот пример:

Код


<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

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

everyone - http://realtsib.ru/oldman/footer_bottom/index.html на здоровье.
На странице специально добавлены раскрывающиеся блоки, дабы было понятно как будет себя вести страница с большим кол-вом текста (блоков с текстом).

Автор: everyone 6.5.2013, 16:18

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

Я использовал http://compass-style.org/reference/compass/layout/sticky_footer/ для прибивания футера книзу.

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

Автор: olldman 8.5.2013, 08:01

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

Автор: everyone 13.5.2013, 09:40

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