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

Sticky slick slider element hidden when position fixed
Why “POSITION:RELATIVE” messes up things?
div containing absolute img has zero height
Need static menu when overflow-x:scroll
How can I put a section under cross-fade background section
Content div nex to fluid fixed div
Where does this distance difference come from
Absolute position relative to some arbitrary element
Relative positioning of custom controls with OpenLayers 3
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

Categories

HOME
shell
time-complexity
amp-html
redux-form
case
numbers
pascal
serialization
grafana
database-normalization
nested-if
echo
recordrtc
joomla3.0
syntaxnet
activecollab
endpoint
selenium-ide
plink
3nf
internationalization
microsoft-dynamics-nav
null-pointer
standards
wolframalpha
sse
undertow
springfox
backpack-for-laravel
angular-routing
tosca
dynamically-generated
surveymonkey
android-maps
apktool
tpm
gitlab-api
postback
dst
paragraph
kodi
dumpbin
glib
git-squash
sammy.js
pop3
pdw-file-browser
roblox
salesforce-communities
xcode7.3
release
apns-php
knime
opencmis
phpdbg
automapper-5
pair-programming
opengl-4
ngmaterial
jqchart
seq
rackspace-cloud
stax
signalr.client
mta
firebase-security
http-status-code-401
freepbx
nservicebus5
php-socket
ellucian-scribe
thread-sleep
false-sharing
httpruntime.cache
opl
qt5.2
sony-lifelog-api
nsurlsessiondatatask
diff3
appserver
entry-point
mobility
ora-00904
xml-dsig
cfcache
gtm-oauth2
actiondispatch
traceability
wp7test
web-notifications
midlet
boost-msm
boost-signals
subproject
ikimagebrowserview
catransform3d
automationelement
cuteeditor
inline-formset
codebase
delimited-text
jqueryform
strtod
data-mapping
glui
complex-event-processing
localizable.strings
sqlobject
soappy
httpcookie
image-capture
great-circle

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