These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:12 pm Advanced search

No movement in footer with scrolling.

If you are stuck or have questions regarding HTML or other Web technologies, ask your questions here. No question too dumb!

No movement in footer with scrolling.

Postby sainiankit » Sun Aug 26, 2012 7:56 pm

I want to design a page with no vertical scroling.

I have the following requirements -
1.) I don't want any scroll bar on the screen when the web page is opened.
2.) A footer that sticks to the bottom and is always visible(without scrolling) no matter what the size of the screen is.

Please Help !
sainiankit
<h6>
 
Posts: 2
Joined: Sun Aug 26, 2012 7:25 pm

Re: No movement in footer with scrolling.

Postby silentimp » Fri Sep 07, 2012 12:12 pm

Why do you want such nasty things?
Well … here you are:
http://jsfiddle.net/wPWUF/

But what about content which won't fit screen?
silentimp
<h6>
 
Posts: 4
Joined: Fri Sep 07, 2012 11:58 am

Re: No movement in footer with scrolling.

Postby d.szlachta » Fri Sep 07, 2012 1:58 pm

Hello,

You can control scrolling by using one of those CSS properties: overflow-x, overflow-y, overflow.
To disable vertical scrolling, apply overflow-y property to body element:
Code: Select all
body {
  overflow-y: hidden;
}


To stick footer to the bottom of the site, you have to set its position CSS property to fixed, and then bottom property to 0px:
Code: Select all
footer {
   position: fixed;
   bottom: 0px;
}


I made a working demo, check it out here: http://dabblet.com/gist/3666448
d.szlachta
<h6>
 
Posts: 2
Joined: Fri Sep 07, 2012 1:41 pm


Return to Help & Advice

Who is online

Users browsing this forum: No registered users and 1 guest