Как заставить плавающий нижний колонтитул придерживаться нижней части области просмотра в IE 6? - PullRequest
Новая
       24

Как заставить плавающий нижний колонтитул придерживаться нижней части области просмотра в IE 6?

12 голосов
/ 29 сентября 2008

Я знаю, что это будет легко с позицией: исправлено, но, к сожалению, я застрял с поддержкой IE 6. Как я могу это сделать? Я бы предпочел использовать CSS, чтобы быть чистым, но если мне придется использовать Javascript, это не конец света. В моей текущей реализации у меня есть «плавающий нижний колонтитул», который плавает над основной областью содержимого и позиционируется с помощью Javascript. Реализация, которую я имею сейчас, не особенно элегантна даже с Javascript, поэтому мои вопросы:

  1. Есть ли способ сделать это без Javascript?
  2. Если мне нужно использовать Javascript, есть ли "хорошие" решения этой проблемы с плавающим нижним колонтитулом? Под «хорошим» я подразумеваю что-то, что будет работать в разных браузерах, не перегружать ресурсы браузера (так как его придется часто пересчитывать), и будет элегантным / простым в использовании (то есть было бы неплохо написать что-то вроде new FloatingFooter("floatingDiv") ).

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

Наконец, более общий вопрос. Я знаю, что эту проблему очень трудно решить, так каковы другие альтернативы пользовательского интерфейса, а не нижний колонтитул внизу каждой страницы? На моем конкретном сайте я использую его, чтобы показать переходы между шагами. Есть ли другие способы сделать это?

Ответы [ 6 ]

20 голосов
/ 29 сентября 2008

Это может сработать для вас. Он работает на IE6 и Firefox 2.0.0.17 для меня. Дать ему шанс. Я сделал высоту нижнего колонтитула очень высокой, просто для эффекта. Вы бы, очевидно, изменили это на то, что вам нужно. Я надеюсь, что это работает для вас. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Liquid Footer</title>
    <style type="text/css">
    .footer {
background-color: #cdcdcd;
height: 180px;
text-align: center;
font-size:10px;
color:#CC0000;
font-family:Verdana;
padding-top: 10px;
width: 100%;
position:fixed;
left: 0px;
bottom: 0px;
}
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    body {height:100%; overflow-y:auto;}
    html {overflow-x:auto; overflow-y:hidden;}
    * html .footer {position:absolute;}
    </style>
    <![endif]-->
</head>

<body>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   <div class="footer">-- This is your liquid footer --</div>
</body>
</html>

4 голосов
/ 25 мая 2009

, если вы не хотите использовать условные комментарии, чтобы вы могли поместить CSS в отдельный файл, используйте !important. Как то так: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>
    <head>
        <style>
            html {
                overflow-x: auto;
                overflow-y: scroll !important;
                overflow-y: hidden; /* ie6 value b/c !important ignored */
            }

            body {
                padding:0;
                margin:0;
                height: 100%;
                overflow-y: hidden !important;
                overflow-y: scroll; /* ie6 value b/c !important ignored */
            }

            #bottom {
                background-color:#ddd;
                position: fixed !important;
                position: absolute; /* ie6 value b/c !important ignored */
                width: 100%;
                bottom: 0px;
                z-index: 5;
                height:100px;
            }
            #content {
                font-size: 50px;
            }
        </style>
    </head> 
    <body>
        <div id="bottom">
            keep this text in the viewport at all times
        </div>
        <div id="content">
            Let's create enough content to force scroll bar to appear.
            Then we can ensure this works when content overflows.
            One quick way to do this is to give this text a large font
            and throw on some extra line breaks.
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/>    
        </div>  
    </body> 
</html>
2 голосов
/ 29 сентября 2008

Я сделал это, используя CSS-выражения в прошлом.

Попробуйте что-то вроде этого: 

.footer {
    position: absolute;
    top: expression((document.body.clientHeight - myFooterheight) + "px");
}

подробнее здесь
и здесь

1 голос
/ 31 октября 2011 
$(function(){
    positionFooter(); 
    function positionFooter(){
        if($(document).height() < $(window).height()){//Without the body height conditional the footer will always stick to the bottom of the window, regardless of the body height, $(document).height() - could be main container/wrapper like $("#main").height() it depend on your code
            $("#footer").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#footer").height())+"px"})
        }   
    }

    $(window).scroll(positionFooter);
    $(window).resize(positionFooter);
});
0 голосов
/ 30 сентября 2008

Если вы поместите теги height в 100% и overflow: auto в теги <html/> и <body/>, то все с абсолютной позицией станет фиксированным. Он самый простой, довольно странный, со странно расположенными полосами прокрутки, но может быть настроен на достойные результаты. Пример 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style>
            html, body
            {
                height: 100%;
                overflow: auto;
            }

            .fixed
            {
                position: absolute;
                bottom: 0px;
                height: 40px;
                background: blue;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="fixed"></div>
        overflow....<br />
        overflow....<br />
        overflow....<br />
        overflow....<br />
        overflow....<br />
        overflow....<br />
        overflow....<br />
        overflow....<br />
        overflow....<br /><!-- ... -->
    </body>
</html>
0 голосов
/ 29 сентября 2008

Если нижний колонтитул имеет фиксированную высоту, и вы знаете это и можете жестко закодировать его в CSS, вы можете сделать это следующим образом: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
        .content
        {
            position : absolute;
            top : 0;
            left : 0;
            right : 0;
            bottom : 50px; /* that's the height of the footer */
            overflow : auto;
            background-color : blue;
        }
        .footer
        {
            position : absolute;
            left : 0;
            right : 0;
            bottom : 0px; /* that's the height of the footer */
    height : 50px;
            overflow : hidden;
            background-color : green;
        }
        </style>
    </head>
    <body>
        <div class="content">
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
        </div>
        <div class="footer">
             the footer
        </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...