другой тип липкого нижнего колонтитула

Моя страница... http://webpages.charter.net/jolove/Escort_Folder/test.html

благодаря: fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css

Теперь у меня есть функциональный нижний колонтитул, который прилегает к нижней части окна.

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

Другими словами, вертикальная полоса прокрутки окна никогда не должна появляться.

Джон


css footer sticky
person Community    schedule 14.08.2010    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Если правильно понять, что вы пытаетесь сделать, это можно сделать с помощью div с процентной высотой. Вот основная идея:

<div id="header" style="height: 10%"></div>

<div id="scrollableContent" style="height: 60%; overflow: auto"></div>

<div id="footer" style="height: 30%"></div>

Используя процентную высоту, каждый div будет изменять размер в соответствии с размером окна, и только у div scrollableContent будет полоса прокрутки.

person Phil Hale    schedule 14.08.2010
comment
[РЕШЕНО] спасибо всем откликнувшимся. webpages.charter.net/jolove/Escort_Folder/test3.html я не Я не хочу, чтобы верхний или нижний колонтитул менялся по высоте, поэтому я не добавлял % ни для одного из них. На самом деле мне не нужен был % в прокручиваемом контенте, потому что нижняя часть прокручиваемого контента совсем не совпадала с верхней частью нижнего колонтитула. Итак... я изменил прокручиваемый контент на position:absolute; с соответствующим верхом: (высота заголовка) и низом: (высота нижнего колонтитула). Заголовок остался относительным, а нижний колонтитул - абсолютным... и не уродливым? полоса прокрутки окна. Еще раз спасибо всем. - person ; 19.08.2010
comment
Пока протестировано только на Mac, Windows еще нет! Есть берущие? - person ; 19.08.2010

arrow_upward
0
arrow_downward

Я не уверен, хотите ли вы следующее, просто попробуйте. на #poemScroller измените height:28em; на height:auto;

person Sotiris    schedule 14.08.2010
comment
Попробовал это, и в результате #poemScroller расширился ниже #footer. Я думаю, что результат имеет смысл, потому что "авто" не эквивалентно 100%. - person ; 19.08.2010

arrow_upward
0
arrow_downward

вы можете использовать статическое позиционирование для достижения того же поведения, см. этот пример

<html>
    <head>
        <style>
            #header{
                position:fixed;
                top:0;
                height:50px;
                z-index:5;
                width:100%;
            }
            #content{
                /* margin top should be >= header height 
                   this also applies for footer */
                margin: 50px 0;
                width:100%;
            }
            #footer{
                position:fixed;
                bottom:0;
                height:50px;
                z-index:5;
                width:100%;
            }
        </style>
    </head>
    <body>
        <div id="header" > <h1>This is header</h1> </div>
        <div id="content" >
            <p>alot of content</p>
        </div>
        <div id="footer" > <h1>This is footer</h1> </div>
    </body>
</html>
person Barakat    schedule 14.08.2010