Permanent footer (no-scroll) in web pages - possible in CSS?

Hi

I read a lot about sticky footers and how these can be fixed to the bottom of the page, but I am really interested in having a permanent footer, as with the EE footer here that provides links to social networking, save etc.

Is this something that can be achieved in CSS? If so, how?

Many thx
capt.
LVL 31
captainAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
It appears that they are using this script:
 <script type="text/javascript">
          jqBind('#pageShareAndManage .twitter','click',function(e){postAsyncOmnitureCustom('eexchangeprod','s2.prop44=\'VQP - Twitter\';s2.events = \'event65\';');});jqBind('#pageShareAndManage .twitter','click',function(e){var shareWindow = window.open('', 'Twitter', 'width=650px,height=480px,status=0,location=0,resizable=1,scrollbars=1,left=100,top=50', 0);jqGet('/async/pageShareAndManage.async?asid=psamAsync&iasid=psamIAsync&componentHtmlId=pageShareAndManage&asyncAction=shorten_url&rtid=10&refID=27669165&slURL=http%3A//www.experts-exchange.com/Web_Development/Web_Languages-Standards/Q_27669165.html',null,function(e){shareWindow.location = 'https://twitter.com/intent/tweet?via=ExpertsExchange&text=Check+out+this+question%3A+Permanent+footer+%28no-scroll%29+in+web+pages+-+possible+in+CSS%3F&url=' + e.replace(/^\s*/, '');});return false;});
          jqBind('#pageShareAndManage .facebook','click',function(e){postAsyncOmnitureCustom('eexchangeprod','s2.prop44=\'VQP - Facebook\';s2.events = \'event65\';');});jqBind('#pageShareAndManage .facebook','click',function(e){var shareWindow = window.open('', 'Facebook', 'width=660px,height=480px,status=0,location=0,resizable=1,scrollbars=1,left=100,top=50', 0);jqGet('/async/pageShareAndManage.async?asid=psamAsync&iasid=psamIAsync&componentHtmlId=pageShareAndManage&asyncAction=shorten_url&rtid=10&refID=27669165&slURL=http%3A//www.experts-exchange.com/Web_Development/Web_Languages-Standards/Q_27669165.html',null,function(e){shareWindow.location = 'http://www.facebook.com/sharer.php?t=Permanent+footer+%28no-scroll%29+in+web+pages+-+possible+in+CSS%3F&u=' + e.replace(/^\s*/, '');});return false;});
          jqBind('#pageShareAndManage .linkedin','click',function(e){postAsyncOmnitureCustom('eexchangeprod','s2.prop44=\'VQP - LinkedIn\';s2.events = \'event65\';');});jqBind('#pageShareAndManage .linkedin','click',function(e){var shareWindow = window.open('', 'LinkedIn', 'width=650px,height=480px,status=0,location=0,resizable=1,scrollbars=1,left=100,top=50', 0);jqGet('/async/pageShareAndManage.async?asid=psamAsync&iasid=psamIAsync&componentHtmlId=pageShareAndManage&asyncAction=shorten_url&rtid=10&refID=27669165&slURL=http%3A//www.experts-exchange.com/Web_Development/Web_Languages-Standards/Q_27669165.html',null,function(e){shareWindow.location = 'http://www.linkedin.com/shareArticle?mini=true&title=Permanent+footer+%28no-scroll%29+in+web+pages+-+possible+in+CSS%3F&url=' + e.replace(/^\s*/, '');});return false;});
          googlePlusOne();
          jqBind('#pageShareAndManage .link .the-widget','click',function(e){jqRemove('#pageShareAndManage .popup'); jqAsyncAppend('#pageShareAndManage .body','/async/pageShareAndManage.async?asid=psamAsync&iasid=psamIAsync&componentHtmlId=pageShareAndManage&asyncAction=popup_link&rtid=10&refID=27669165&slURL=http%3A//www.experts-exchange.com/Web_Development/Web_Languages-Standards/Q_27669165.html');return false;});
          jqBind('#pageShareAndManage .email .the-widget','click',function(e){jqRemove('#pageShareAndManage .popup'); jqAsyncAppend('#pageShareAndManage .body','/async/pageShareAndManage.async?asid=psamAsync&iasid=psamIAsync&componentHtmlId=pageShareAndManage&asyncAction=popup_email&rtid=10&refID=27669165&slURL=http%3A//www.experts-exchange.com/Web_Development/Web_Languages-Standards/Q_27669165.html');return false;});
          jqBind('#pageShareAndManage .monitorWrapper','click',function(e){jqAsyncLoad('#pageShareAndManage .monitorWrapper','/async/pageShareAndManage.async?asid=psamAsync&iasid=psamIAsync&componentHtmlId=pageShareAndManage&asyncAction=toggle_monitoring&rtid=10&refID=27669165');return false;});
          
        </script>

Open in new window


I don't have a clue what it is actually doing, because it it calling functions defined in the jquery files at the beginning of the page.

If I want something to stick to the bottomI just use:

#footer  {position:fixed; bottom:0px; left:0px;}

I think they have to use the scripting to support older browser (specifically IE) because the position:fixed won't work in older browsers.  Plus there appears to be a lot of tracking crap included in the script, so just using the script will probably not work even if you have the jquery files with the functions.

Cd&
0
captainAuthor Commented:
cheers Cd&

That CSS sticks the footer at the bottom of the site but not the browser window, correct?
0
COBOLdinosaurCommented:
Sorry about the delay ... technical issues on my end (still recovering from an explosion and fire in the server room and an admin who had not done software backups for a year).

It is relative to the browser window (viewport).  

Cd&
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

captainAuthor Commented:
Sorry for being dense, I don't seem to be able to replicate the effect as it is here on EE, ie the browser will have a permanent footer irrespective of zoom or scrolling...
0
COBOLdinosaurCommented:
Scrolling should not break it but zoom is a system level control so that can break it and a lot of other things.

If you are not using either an HTML5 or XHTML DOCTYPE, that will also cause some problems.  position fixed is one of those things where the standard has gone back and forth a couple of times.

Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
captainAuthor Commented:
OK will play and ask another question if needed. Thanks much.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.