So, trying to make a footer for my test page, I got a problem I'd solved it alone, but in a hard way. http://testemihai.leupa.us/ So, I wanted the page to not have a scroll bar, and the footer to be exactly down in a page. On my screen it's ok, I don't know if other screen size it will see it ok or shorter or larger. I put the height of the main div, with the text and button to have a height, and the footer div to have a margin-top till it got in perfect position (for my screen), I want to know if it's a easier and better way to put the footer down on page but without having a scrolling bar and to be exactly the same on every screen-size.
It's a silly idea, because your page will look weird in some browsers. I don't think there's a universal solution to this. It may look good in your average laptop, but not in ipads or "taller" browsers of some mac computers / laptops. The simplest way to hide the scroll bar is by adding overflow-y:hidden; to your body css code.
So the single way to put a bar to footer like one on my page, is to have content on your page and put the footer afterward, without trying to make it stand down?
No, the only sure-fire way to get a footer to stay on the bottom of the page is to use position: fixed or position: absolute on the footer itself. However, that involves other gotchas, among others that the footer might disappear (or, you'll have a scroll-bar), or that content will be cut off if you don't set up paddings and margins properly. The simple way of hiding the scroll-bar, suggested by qwikad, isn't recommended, though, as it will still hide the scroll-bar even if the page is longer than the actual viewport. Usability nightmare. Forget about the scroll-bar - if you don't want the scroll-bar to force the page to change depending on whether it's there or not, make the scroll-bar always visible. (overflow-y: scroll)
Here is a fairly robust example of a footer locked to the bottom of the viewport or under the content. This layout is a holdover from print and is a Bad Idea when used on the web. Don't do, but if you do anyway, my example works. gary
Uhm, silly question, but do you mean a sticky footer that still gets pushed off the screen if the content is bigger than the window -- which is what Gary linked to, or a always there footer that overlaps the content regardless of height. If the former, there's nothing wrong with that. If the latter, just say no. The LAST thing someone on a small screen needs is LESS screen space. It's why in the majority of cases were soemone uses position:fixed or emulates it with JavaScript, I have the overwhelming urge to introduce my fist to someone's teeth. If you want what gary showed but can't predict the footer height, and don't care about IE 9/earlier, flex-box can handle it very easily. <body> <div id="top">Your content</div> <div id="footer">Footer</div> </body> Code (markup): /* -webkit- below are for safari, Chrome no longer needs them -ms- below are for IE10, IE11 no longer needs them NONE of this works in IE9/earlier Assumes HTML, BODY and DIV have margins and padding nulled */ html, body { width:100%; height:100%; } body { display:-webkit-flexbox; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; } #top { -webkit-flex:1 0 auto; -ms-flex:1 0 auto; flex:1 0 auto; } #footer { -webkit-flex-shrink:0; -ms-flex-shrink:0; flex-shrink:0; } Code (markup): I'm at the point where if something like that doesn't work in outdated browsers, screw 'em, it does not actually harm the page's usability, it just looks wonky. OH WELL.