Нижний колонтитул не остался в нижней части страницы

Я пытаюсь оптимизировать сайт, над которым я работаю для мобильных пользователей. Во время работы над сайтом я заметил, что на очень маленьких экранах (в частности, 450 пикселей и менее) мой нижний колонтитул ломается и больше не застрял в нижней части страницы.Нижний колонтитул не остался в нижней части страницы

Я считаю, что виновником должно быть что-то связанное с департаментом #viewWrapper, но после осмотра через хром-консоль и беспорядка с ним (положение, физический размер и т. Д.) В течение нескольких дней мне еще предстоит найти решение к нему.

Любая помощь приветствуется. Вот ссылка на страницу в вопросе:
http://mhtc-vm1.cs.wpi.edu:8080/test/explore

Структура страницы:

<body> 
    ... 
    <div class="container-fluid-full"> 
     ... 
     <div id="content"> 
      ... 
      <div id="viewWrapper"> 
       ... 
      </div> 
     </div> 
    </div> 
    <footer>...</footer> 
</body>

Некоторые относительный CSS:

@media only screen and (max-width: 450px) { 
    #viewWrapper { 
     left: 0px; 
    } 
} 

#viewWrapper { 
    position: absolute; 
    top: 180px; 
    left: 450px; 
    right: 0px; 
    bottom: -160px; 
    overflow: hidden; 
    border: 0; 
    margin: 0; 
    outline: 0; 
    padding: 0; 
    vertical-align: baseline; 
    display: block; 
} 

.site-footer { 
    position: relative; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    z-index: 999; 
    padding: 10px 0px !important; 
    clear: both; 
    display: block; 
}

источник

2016-12-15 xjsc16x

Пожалуйста, пост фактический код, а не ссылки на внешние веб-страниц. –

Я обновил вопрос, чтобы включить некоторый относительный код, извините – xjsc16x

вы можете написать

@media screen 
    and (max-device-width: 1024px) { 

    #viewWrapper{ 
     bottom: 0; //apply bottom 0 with media query for small screen only 
    } 

}

источник

2016-12-15 04:03:05 Rahul

Спасибо, это исправлено! – xjsc16x

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

<footer id="colophon" class="site-footer" role="contentinfo"> 
    <div class="site-info container"> 
     <p class="copy">&copy; 2016. Worcester Polytechnic Institute. All Rights Reserved. 
     Sponsored by Mass High Technology Council</p> 
    </div> 
     <div style="float:right;padding-right:20px"> 
     <a class="footerLinks" href= "api"> For Developers </a> 
     <a class="footerLinks" href= "feedback"> Contact Us</a> 
     <a class="footerLinks" href= "about"> About Us </a><br /> 
     </div> 
    <!-- .site-info --> 
</footer>

источник

2016-12-15 03:53:31 chop62

Нижний колонтитул не остался в нижней части страницы

ответ

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