jquery - Forcing footer to bottom of page, if document height is smaller than window height -


i'm working on fixing display of website in ipad's portrait mode. issue page length isn't long ipad's portrait display. here pic of i'm talking about:

enter image description here

i created jquery function thought detect when document height isn't big window height, set position of footer fixed. here code:

if ($(document).height() < $(window).height()) {     $('#footer-wrapper').attr('style', 'position: fixed!important; bottom: 0px;'); } 

current css:

#footer-wrapper {     padding: 20px 0px 23px;     background-color: #e3e9dc;     border-bottom: 3px solid #007897;     border-top: 3px solid #007897;     color: #585858;     position: absolute;     bottom: 0px;     left: 0px;     width: 100%;     text-align: center; }  @media screen , (max-width: 1024px) {     #footer-wrapper {         /*padding: 20px 0px 23px;*/         background-color: #e3e9dc;         border-bottom: 3px solid #007897;         border-top: 3px solid #007897;         color: #585858;         position: relative;         margin-bottom: -65px!important;         width: 100%;         text-align: center;     } } 

i think work, reason document saying height bigger window viewport, if statement isn't executed. know more reliable way of achieving this?

simply change javascript to:

if ($(document.body).height() < $(window).height()) {   $('#footer-wrapper').attr('style', 'position: fixed!important; bottom: 0px;'); } 

Comments

Popular posts from this blog

javascript - jquery or ashx not working -

opencv - DataType<cv::detail::deriv_type>::depth what is it used for -

python 3.x - Mapping specific letters onto a list of words -