другой вид липкого нижнего колонтитула - PullRequest
Новая
       50

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

1 голос
/ 14 августа 2010

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

спасибо: сорокsevenmedia.com/blog/archives/making_your_footer_stay_put_with_css

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

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

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

Джон

Ответы [ 3 ]

0 голосов
/ 15 августа 2010

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

0 голосов
/ 15 августа 2010

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

<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>
0 голосов
/ 15 августа 2010

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

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

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

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

При использовании высоты в процентах каждое деление будет изменяться в соответствии с размером окна, и только у элемента scrollableContent будет полоса прокрутки.

...