1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Height of a page.

Discussion in 'CSS' started by SSORE7, Nov 26, 2015.

0
  1. #1
    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.
     
    SSORE7, Nov 26, 2015 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #2
    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.
     
    qwikad.com, Nov 26, 2015 IP
  3. SSORE7

    SSORE7 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    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?
     
    SSORE7, Nov 26, 2015 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    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)
     
    PoPSiCLe, Nov 27, 2015 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    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
     
    kk5st, Nov 27, 2015 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    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.
     
    deathshadow, Nov 28, 2015 IP