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

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

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

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

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

источник

2008-09-28 Bialecki

Если чувствовал шутливым, я предложил бы использовать фрэймы. Но я не, поэтому не буду. – skaffman 2008-09-28 20:31:15

Почему только тег Javascript? Похож на вопрос CSS для меня. – 2008-09-28 20:40:04

Мне интересно, сколько людей все еще использует IE6? – 2009-05-24 21:58:38

Это может сработать для вас. Он работает на 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>

источник

2008-09-29 01:07:09 Taptronic

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

попробовать что-то вроде этого:

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

read more here
and here

источник

2008-09-28 20:37:44 Mattias

-1

Если сноска зафиксировал высоту, и вы знаете это и может жестко закодировать его в 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>

источник

2008-09-28 20:52:11 qbeuek

Если поставить 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>

источник

2008-09-29 21:53:10

, если вы хотите, чтобы не использовать условные комментарии, так что вы можете поместить 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>

источник

2009-05-24 21:51:37

$(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); 
});

источник

2011-10-31 07:10:20 Greg

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

ответ

Смежные вопросы