However, you cannot click the link to sitepoint. because it is always on the bottom at http://form.kr/dest/footer.php?length=long.
Although some cnn links which are going to cnn.com is sometimes hidden by the stickBottom, It’s okay because it is clickable when all scroll is downed.
But the link which is going to site point in the footer is not clickable.
The sitepoint link is always on the bottom and centered horizontally
I try to add “z-index:2” on the sitepoint link for making it clickable. but it seems not to work as I expected.
Can I make it clickable by your help?
Z-index only applies to positioned elements and the Sitepoint link is not positioned. You need to add position:relative to the link before the z-index will take effect.
Only if you click at the bottom 100px. On my large screen there is a lot of gray background at the bottom so your code makes little sense.
What you should have done is set the stickyBottom to take over the whole viewport (position:fixed with top,left,right and bottom set to a value of zero) and set its z-index below all other elements on the page and then the blank section of the bottom of the page will always take you to google no matter how short it is. If content goes below the fold then there will be no blank screen to click anyway and the link will be hidden underneath the page content.
Assuming that’s what you meant to do but I guess you may have wanted the green section to also go to google but I can’t second guess everything.
No that is not OK and goes against all design principles It’s almost like you are tricking someone on purpose. If you add position:relative to #main with a z-index of 2 then your stickyBottom will not obscure the links to CNN.
You also have a horizontal scrollbar on the viewport when none is needed because you have added width:100% to your footer making it 100% + 20px (padding) wide thus forcing a scrollbar. You do not need a width on static elements. remove the width and the horizontal scrollbar will disappear (this has been mentioned to you before ;)).
Note that ids are unique and you are not allowed to have 2 id="footer on your page.Use classes if you need to reuse styles.
I’m assuming you are just doing this for learning purposes so I should be a bit more lenient
As I remove the width, the horizontal scrollbar doesn’t not being disappeared.
And, google link doesn’t work at http://form.kr/dest/footer3.php?length=long
How can I remove the horizontal scroll bar with google link alive?
It is okay, It is intended that most of my users will know there is google link on the bottom.
I don’t understand the quote above.
I cannot see the gray background at the bottom with my desktop(chrome) and my handphone(sapari)…
How can I see the gray background at the bottom?
That’s because you removed the width:100% from it and not the footer as I told you to do! I also specifically said that static elements do not require a width and stickyBottom is not a static element. It is an absolutely positioned element and absolutely positioned elements shrink fit their content unless you provide a width.
If you can explain exactly what you are trying to do then I may be able to help a little more but the logic of the google link way down the page makes no sense to me and indeed on my large screen imac it is miles away from any content and of no use whatsoever.
The screenshot is from my standard normal sized PC monitor and you can clearly see the gap on the page.
I don’t understand what you are trying to do so its hard to help properly?
It looks like you want the green footer to go to google apart from the link in the middle which should go to where its pointed to.
On short pages where is the link to google supposed to be situated?
a) Is the google link still supposed to be over the green area?
b) Is the google link also supposed to extend all the way down the empty part of the page to the bottom of the viewport?
c) Or is the google link supposed to be over the green area and also extend down the page to the bottom of the viewport when content is small.
If you can clarify those details unambiguously I can then offer some pointers
The contents of my page is usually very long.
It’s not journal like twiter or facebook but academic like essays or novels.
I want that I can go to bottom or top of the page at any place on the page.by one or two click.
The stickBottom is a kind of substitute of scroll bar…
I don’t like to use scroll bar for going to bottom or to top since I have some chronic pains on my wrist personally.
That seems to be an entirely different question and doesn’t answer any of the questions I laid out. You can jump to any part of the page using in page links and your stickBottom has no meaning in that context.
If you don’t want any gray (viewport background) at the bottom of the viewport you could make your page a minimum of the viewport height and use a proper sticky footer technique.
As I said I can’t really offer any code as there are too many variable conditions that you have not answered and you seem to be building a page that fits only your screen.
Perhaps if you explain just one issue that you want solved then we can address that alone
Not only the handphone but also desktop pc needs it.
Sometimes I am in my bed with my mouse and read the page of an essay.on the monitor.
I am half sleep on the page and not want to go to desk for tapping the home or end key on the keyboard.
In that situation, the sticyBottom might work fine.
It’s almost like you are tricking someone on purpose. 
If you add position:relative to 