css - Footer is not being shown properly on different device heights -


i having problem footer. have page content , on devices (like mobile - in zoomed out view) page content not fill parent device height while on devices, does. footer creating problem these different heights. when content doesn't fill parent device height, footer shown correctly @ bottom of page when content fills parent device height , overflows, footer show on content. may not clear english, these screen snaps make clear.

footer content not filling parent height(showing correctly)

footer content not filling parent height(showing correctly)

footer overflown content (footer not shown correctly)

enter image description here

picture quality not clear still can seen.

this css code, have been using till now.

#footer{      display:block;      margin-right:auto;      margin-left:auto;      position:absolute;      bottom:0;      height:100px;      width: 60%;      text-align:center;      color:green;      font-size:18px;      font-family:times;  } 

can fixed? want show footer @ end of page, when content overflown. appreciated.

on #main element right before footer (assuming using id="main" item green border, following:

#main {     margin-bottom: 100px; } 

edit:

<div id="wrapper">   <div id="header"></div>   <div id="main"></div>   <div id="footer"></div> </div>  #wrapper {     position: relative;     padding-bottom: 110px; } 

Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -