Плавающий нижний колонтитул CSS?

Я пытался следовать этот пост и это сообщение в приведенном ниже коде с небольшим успехом. Когда в div над нижним колонтитулом есть прокручиваемый контент, нижний колонтитул перемещается по середине прокручиваемого контента. Я уверен, что есть более простое решение, чем то, что я пытаюсь сделать ниже:

.container {
  width: 964px;
}

#footer {
  background-color: #000000;
  height: auto;
  margin-top: 0px;
  bottom: 0px;
}
#footer-container {
  background-color: #000000;
}

#footer-container #footer {
  background: url("http://www.me.com/common/commonspot/templates/images/chrome/logos/footer-logo.png") no-repeat scroll 20px 23px #000;
  padding-bottom: 49px;
}
#footer .top {
  border-bottom: 1px solid #7F7F7F;
  margin-left: 82px;
  padding-bottom: 16px;
  padding-top: 33px;
}
#footer .text-logo {
  background: url("http://www.me.com/common/commonspot/templates/images/chrome/logos/text-logo.png") no-repeat croll 0 0 transparent;
  float: left;
  height: 28px;
  width: 176px;
}
#footer .slogan {
  background: url("http://www.me.com/common/commonspot/templates/images/chrome/logos/slogan.png") no-repeat scroll 0 0 transparent;
  float: right;
  height: 12px;
  margin-top: 14px;
  width: 259px;
  background-color: #000000;
}
#footer .links {
  float: left;
  margin-left: 81px;
  margin-top: 13px;
}
#footer .links a {
  color: #fff;
}
#footer .links li {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 13px;
  text-decoration: underline;
}
#footer .social {
  float: right;
  margin-left: 37px;
  margin-right: 5px;
  margin-top: 14px;
}
#footer .social li {
  margin-bottom: 7px;
  text-decoration: underline;
}
#footer .social a {
  color: #FFFFFF;
  font-size: 12px;
  padding-left: 26px;
}
#footer .social .facebook {
  background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 0px 4px transparent;
}
#footer .social .twitter {
  background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 0px -20px transparent;
}
#footer .social .youtube {
  background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 4px -42px transparent;
  padding-left: 15px;
}
#footer .social .itunes {
  background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 4px -66px transparent;
  padding-left: 15px;
}
#footer .updated {
  clear: right;
  color: #9B9B9B;
  float: right;
  font-size: 10px;
  margin-top: 14px;
}
#footer-container ul li {
  text-align: left
}
<div id="footer-container" style="margin: 0 auto; width: auto;" align="center" background-color="#000000" ;>
  <div id="footer" class="chrome-center clearfix">
    <div class="top clearfix">
      <a href="http://www.me.com/">
        <div class="text-logo"></div>
      </a>
      <div class="slogan"></div>
    </div>
    <ul class="links">
      <li><a href="/faqs.htm">Frequently Asked Questions</a>
      </li>
      <li><a href="/aboutus/website-policies.htm">Website Policies</a>
      </li>
      <li><a href="/contacts.htm">Contact Us</a>
      </li>
    </ul>
    <ul class="social">
      <li class="youtube"><a href="http://www.youtube.com/user/Mywebsite">YouTube</a>
      </li>
      <li class="itunes"><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewArtistLegacy?cc=us&amp;id=216751324">iTunes</a>
      </li>
    </ul>
    <ul class="social">
      <li class="facebook"><a href="http://www.facebook.com/mywebsite">Facebook</a>
      </li>
      <li class="twitter"><a href="http://twitter.com/mywebsite">Twitter</a>
      </li>
    </ul>
    <div class="updated">
      <p>Last Updated: 03/06/2015</p>
    </div>
  </div>
  <!--! end of #footer-->
</div>
<!--! end of #footer-container -->


html css footer sticky-footer
person tpcolson    schedule 21.07.2015    source источник
comment
добавить position:fixed в нижний колонтитул   -  person Rachel Gallen    schedule 21.07.2015
comment
почему бы вам просто не прокрутить свой контейнер? например rachelgallen.com/scrollheader.html   -  person Rachel Gallen    schedule 21.07.2015
comment
попробовал это. Нижний колонтитул остается фиксированным, но фиксируется в нижней части страницы, а контейнер прокрутки становится слишком узким, чтобы отображать какое-либо содержимое.   -  person tpcolson    schedule 21.07.2015
comment
вот как это выглядит: grsm.nps.opendata.arcgis.com/datasets? q=тропы. Нижний колонтитул начинается на строке 1855   -  person tpcolson    schedule 21.07.2015
comment
@tpcolson, вы можете предоставить jsfiddle?   -  person Himesh Aadeshara    schedule 21.07.2015
comment
@HimeshAadeshara отрицательно, довольно ограничено тем, что мы можем развернуть в CMS.   -  person tpcolson    schedule 21.07.2015
comment
@tpcolson ваш основной код работает правильно?   -  person Himesh Aadeshara    schedule 21.07.2015
comment
@HimeshAadeshara да, когда я удаляю элемент нижнего колонтитула, все работает, и нижний колонтитул работает сам по себе.   -  person tpcolson    schedule 21.07.2015
comment
@tpcolson привет ‹div id=контейнер нижнего колонтитула style=margin: 0 auto; width: auto; может помешать, поэтому попробуйте после удаления margin: 0 auto; это может сработать для вас   -  person Himesh Aadeshara    schedule 21.07.2015
comment
@HimeshAadeshara удалил margin: 0 auto, все та же проблема.   -  person tpcolson    schedule 21.07.2015
comment
@tpcolson тогда нужно увидеть работающую демонстрацию, можете ли вы предоставить пробный код в прямом эфире?   -  person Himesh Aadeshara    schedule 21.07.2015
comment
Давайте продолжим обсуждение в чате.   -  person tpcolson    schedule 21.07.2015
comment
@tpcolson по какой-то причине не может быть в чате   -  person Himesh Aadeshara    schedule 21.07.2015
comment
@HimeshAadeshara grsm.nps.opendata.arcgis.com/datasets?q=trails   -  person tpcolson    schedule 21.07.2015