css-position


Sticky Footer at bottom of PAGE, not just bottom of WINDOW


I have been searching online for a few days now trying to crack this:
My code approx layout:
<body>
<div id="wrapper">
<div id="top-header"></div> <!-- This is a fixed position header -->
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
I'm trying to make my footer so it works in the following two scenarios:
1) When there is little/no content the footer sits at the bottom of the screen (to avoid ugly/unprofessional-looking gaps)
2) When the content overfills the page (requiring a scrollbar), the footer is at the bottom of the PAGE (ie: is initially hidden until you scroll down).
Unsuccessful FIX #1
So far, I have tried using position:fixed, which works in scenario (1) but in scenario (2), the footer is always visible (in its fixed position at the bottom of the window), which I don't want. I only want to be able to see the footer when I scroll to the bottom.
Unsuccessful FIX #2
I then found a little more success by absolutely position the footer relative to the 'wrapper' div (which had a min-height:100%). In scenario (1) this worked fine! But when I tried scenario (2), the footer would appear absolutely at the bottom of the "window" but not the bottom of the "page" (or more specifically the 'wrapper' div). When I would then scroll down, the footer would move with the page and cut across the content - very strange! ...... It seems the problem is arising because the height of the 'wrapper' is relative to the window size (height:100%) and this varies in real-time as I change the window size. Is there a way I can state the height of the 'wrapper' div to be 100% of the 'page' rather than 100% of the 'window'? If you think there is a better method or need to see the source code, please let me know... I will happily provide.
I have posted this question because even after following several detailed instructions to fix it, and searching in the archived threads on this site, I have been unsuccessful. Any help would be most appreciated.
JMSSTKS

Related Links

How to set div height with relative position as child div with absolute position using css?
I'm trying to put a fixed divsion at the top of the page but when I scroll with FF, lines are lost
fixed position z-index not working
how to create adjustable gap between elements (div)
How to properly apply a css hack for IE11 transition misbehaviour
How do you make leaflet popup window full screen on small screens?
Fix a div to the bottom while scrolling with skrollr
Sticky Footer at bottom of PAGE, not just bottom of WINDOW
How to set div absolute position from the parent div
Polymer paper-fab with position:fixed behaves strangely when used with core-list that has a scrollTarget
What is the use of “static” positioning in CSS?
CSS: fixed position
Style sheet positioning won't keep everything in place
Div on top 100%
CSS float image align
google sites html box tool css postion absolute

Categories

HOME
uml
phantom-dsl
microsoftgraph
google-cloud-platform
developer-tools
datastore
components
telegram-bot
nstableheaderview
barcode
syntaxnet
pcl-crypto
categorical-data
openstreetmap
appcelerator-studio
project-intu
jsonpath
video-editing
git-extensions
ag
poedit
babel
pchart
definitelytyped
outliers
angular-translate
event-flow
scatter3d
hibernate-search
git-rewrite-history
mcustomscrollbar
doc
branching-and-merging
show-hide
uiimage
facebook-social-plugins
snapchat
servermanager
openal
opennms
term
fclose
identification
context-switch
static-cast
check-mk
seq
lsyncd
javafx-css
smartfoxserver
visual-studio-2008-sp1
usart
webjars
async.js
respondcms
appscale
google-query-language
sklearn-pandas
ikiwiki
halcon
linklabel
sciruby
ess
morton-number
lasso
eoferror
jdk1.7
shopizer
variadic-templates
execve
ghcjs
contrast
easyrtc
raygun
trdion2011
with-statement
ignite-ui
codeplex
functional-java
maven-scm
kendo-dataviz
asdf
abstract-data-type
bjyauthorize
web-notifications
appjs
wiimote
box2d-iphone
convention
entity-attribute-value
ikimagebrowserview
listactivity
exponentiation
rmdir
clrstoredprocedure
object-database
skype4java
feasibility
xslcompiledtransform

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App