{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 神经病院院长 的问题《force footer to bottom of page for short pages in》','https://www.manongdao.com/q-942747.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I've got a website which I'm still playing with and editing however I'm a little lost with trying to make a footer stick to the bottom of the screen.
I tried ryanfait option (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/) but I cannot see how to make it work with my current theme.
I then tried a different method using absolute position etc but it placed the footer in the middle of the page on my long pages so clearly that wont work.
My current site is: http://goo.gl/PO3OYo and you can see on the front page what I mean about the footer not being right...
My site html is basically this:
<body>
<div id="wrap">
<div id="header"></div
<div id="nav"></div>
<div id="inner"></div>
<div id="footer" class="footer"></div>
</div>
and the CSS is
* {
margin: 0;
}
html {
margin: 0;
padding: 0;
height:100%;
}
body {
background: #000000 url(images/bg.jpg) top center no-repeat;
color: #444444;
font-size: 12px;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif;
margin: 0 auto 0;
padding: 0;
line-height: 21px;
height:100%;
}
#wrap {
height:auto !important;
margin:0 auto;
min-height:100%;
padding:0;
position: relative; */ I tried this but it breaks long pages */
}
#inner {
background: #FFF;
width: 900px;
margin: 0 auto 0;
padding: 30px;
overflow: hidden;
}
#footer {
background: #161616;
color: #666666;
margin: 0 auto 0;
padding: 20px, 0, 0, 0;
clear: both;
overflow: hidden;
border-top: 1px solid #222222;
height: 40px;
bottom: 0;
left: 0;
width: 100%;
position: absolute; */ I tried this but it breaks long pages */
}
Do you have any ideas how I can get it to work without the position: absolute?
Come on dude, you were so close!
Make sure you follow the same structure:
Then from ryan fait's
Example: http://codepen.io/EightArmsHQ/pen/YPymWV
I'd really advise having a muck about with my code in Codepen, just to get to grips with it. I sticky footer every footer I've ever made, and it still gets the better of me some times so just keep at it. There will also always be occasions when the above doesn't quite work...