Проблема нижнего колонтитула в CSS ... Нужна помощь - PullRequest
Новая
       2

Проблема нижнего колонтитула в CSS ... Нужна помощь

0 голосов
/ 30 июня 2010

AIM : я хочу расположить нижний колонтитул на основе многих факторов.Его можно найти здесь

1) Я хочу разместить нижний колонтитул в нижней части экрана, если на моей странице нет содержимого (или может быть 1 или 2 строки).(нижний колонтитул виден без прокрутки вниз - полос прокрутки нет)

2) Мой нижний колонтитул должен быть расположен относительно последней строки контента, если на моей странице так много контента.Поэтому нижний колонтитул должен регулировать свое положение в соответствии с содержимым.

Примечание : нижний колонтитул должен быть совместимым в разных системах с разным размером экрана / разрешением ... (нетбук отличается отразмером с экран ноутбука).

Другая информация ----> Внутри #footer_outer находится #footer. 

#frame {
    margin:0 auto;
    width:962px;
    margin-top:10px;
    height:auto;
}

#content {
    padding:5px 5px 5px 5px;
    margin:0 auto;
    width:890px;
    height:auto;
    min-height: 372px; /* i use this to have footer at the bottom of **my** screen when there is not much content. */
}

#footer_outer{
    width:100%;
    background:#444;
    padding:10px 0 0 0;
    height: 130px;
    position:relative;  /*to put footer_outer 50px below the content*/
    top: 50px;
    bottom:0px;
}

#footer {
    margin:0 auto;
    width:834px;
    height:auto;
    overflow:hidden;
}

Пожалуйста, помогите мне внести изменения в этот CSS,Большое спасибо!

Ответы [ 4 ]

0 голосов
/ 01 июля 2010

Попробуйте определить контейнер вашей страницы следующим образом: height: 100%; позиция: относительная;

затем внутри этого контейнера поместите div ширины нижнего колонтитула, позиция: абсолютная; внизу: 0px;

0 голосов
/ 30 июня 2010

Оформите 5 различных решений и выберите лучшее для вас

от 1 до 4 можно найти здесь

еще один здесь

0 голосов
/ 30 июня 2010

Из-за содержимого переменной длины я не вижу другого выхода, кроме использования JavaScript, особенно если вы хотите, чтобы он отличался для разных размеров экрана.Сначала нужно проверить высоту области просмотра, затем высоту #content и выполнить математические расчеты, чтобы они соответствовали нижнему колонтитулу, где вы хотите, основываясь на этих числах

0 голосов
/ 30 июня 2010 
 <style>
  #wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* fix negative height */
  }
  #footer, #push {
    height: 100px; /* fix positive height */
    clear: both;
    background:#000;
  }
 </style>

<div id="wrapper">
  <p>content here.</p>
  <div id="push"></div>
</div>
<div id="footer">
  footer
</div>

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

...