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?
 
COBOLdinosaurConnect With a Mentor Commented:
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
 
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
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
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
 
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
 
captainAuthor Commented:
OK will play and ask another question if needed. Thanks much.
0
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.

All Courses

From novice to tech pro — start learning today.