SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    sticky footer and safari

    I have a page at http://dot.kr/joon/007/
    The page is well shown in chrome, fireFox and opera.
    But in Safari, the sticky footer is not sticky on the bottom of the browser.

    Can I fix it with your help?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    You might need some vendor prefixes in there for Safari. flex display is pretty new and not fully supported yet. E.g.

    Code:
    html, body {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    body {
    	display: flex;
    	display: -webkit-flex;
    	height: 100vh;
    	flex-direction: column;
    	-webkit-flex-direction: column;
    }
    .content {
    	flex: 1;
    	-webkit-flex: 1;
    	overflow:auto;
    }
    main.content { background:blue }
    header, footer { background:red; }
    p { margin:1em }

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You might need some vendor prefixes in there for Safari. flex display is pretty new and not fully supported yet. E.g.

    Code:
    html, body {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    body {
    	display: flex;
    	display: -webkit-flex;
    	height: 100vh;
    	flex-direction: column;
    	-webkit-flex-direction: column;
    }
    .content {
    	flex: 1;
    	-webkit-flex: 1;
    	overflow:auto;
    }
    main.content { background:blue }
    header, footer { background:red; }
    p { margin:1em }
    I applied your code at http://dot.kr/joon/015/.
    But it seems not to work as I expected.
    The sticky header is not always on the head of the browser in Safari.
    And the sticky footer is neither always on the footer of the browser in Safari.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,532
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dotJoon View Post
    I applied your code at http://dot.kr/joon/015/.
    But it seems not to work as I expected.
    The sticky header is not always on the head of the browser in Safari.
    And the sticky footer is neither always on the footer of the browser in Safari.
    It's working fine on Safari on a mac.

    If you are using safari on a pc then that has been discontinued in 2012 and is not supported any more. Flex box or any current css will therefore not work properly on it. There will be very few users of safari on windows these days apart from developers.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •