SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Addict AshleyH's Avatar
    Join Date
    Mar 2005
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% Screen Height

    Hi All,

    I'm having an issue trying to get something sit at the bottom of the screen.

    I have this page:

    http://www.realtimeinternet.co.uk/Trehayl/

    It's the bottom 'copyright' line that I need to have sat at the bottom of the screen.

    Many thanks

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First thing you need to do is get rid of the additional call to the css file -it is being called twice. Remove this line (highlighted) :
    Code:
    <body>
    
    <div id="container">
    <div id="navigation">
    <link href="css/trehayl.css" rel="stylesheet" type="text/css" />
    
    <div id="mainnav">
    Next, you need to move the #copyrightline outside of the #container by moving the last closing </div> tag :
    Code:
      <div class="containerend"></div>
    </div> <!-- end of #container  -->
    <div id="copyrightline">Copyright  2009 Trehayl Rock Cornwall
    </div>
    </body>
    </html>
    The idea now is to make both the html and body elements 100% high, and the #container div min-height 100%. The #copyrightline div can be given a height and pulled back into view with a negative top margin equal to the height. The #containerend div can also be made the same height to prevent the bottom div covering any content.

    Remove the existing body style and make these changes :
    Code:
    html, body {
    	height: 100%;
    	margin: 0;
    	padding: 0;
    	position: relative;
    }
    
    #container {
    	margin: 0 10px;
    	min-height: 100%;
    }
    
    * html #container {
    	height: 100%;
    }
    
    .containerend {
    	clear: both;
    	height: 20px;
    }
    
    #copyrightline {
    	background-color: #333333;
    	padding-left: 40px;
    	height: 20px;
    	line-height: 20px;
    	font-size: 10px;
    	color: #FFFFFF;
    	font-family: Arial, Helvetica, sans-serif, "Gill Sans";
    	margin-top: -20px;
    	position: relative;
    }

  3. #3
    SitePoint Addict AshleyH's Avatar
    Join Date
    Mar 2005
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for coming back to me with this one.

    I've uploaded another file - but not sure it's working.

    The goal post has moved a little as I'm using a scaling background image - could you have a look and see what is going wrong here?

    It's driving me nuts!

    Many thanks

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    You haven't made the html,body changes I noticed (didn't delve deeper)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a working example, although with a centered layout:

    http://www.dzinelabs.com/sandbox/Height.html
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    Here's a working example, although with a centered layout:

    http://www.dzinelabs.com/sandbox/Height.html
    Hi Luki_be,
    That min-height hack that your using for IE6 with the !important rule has been shown to cause the footer to stick in IE7. If you resize your browser window in IE7 and then drag the bottom of the viewport back to full height you will see the footer stick. When you remove all that filler text you have in there you will see what happens.

    Code:
    #wrapper {
      min-height: 100&#37;; /* gives layout 100% height */
      height: auto !important;
      height: 100%;
      margin: 0 auto; /* centers #wrapper */
      width: 700px; /* centered div must be given a width */
      background: #CCC;
      position:relative;
    }
    Your better off using the * html hack for IE6 instead -
    Code:
    #wrapper {
      min-height: 100%; /* gives layout 100% height */
      margin: 0 auto; /* centers #wrapper */
      width: 700px; /* centered div must be given a width */
      background: #CCC;
      position:relative;
    }
    * html #wrapper { height: 100%;} /*min-height for IE6*/

  7. #7
    SitePoint Member zoloadang's Avatar
    Join Date
    Mar 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thx,#5's external link,that's what i'm looking for!
    ideal performance for ie(6,7,8),FF3,safari and so on.

    hi,Rayzur,
    i don't see more differences when removed all filler text,meanwhile,in my opinion,
    as follows:
    min-height: 100&#37;; /* gives layout 100% height */
    height: auto !important;
    height: 100%;

    equal

    * html #wrapper { height: 100%;} /*min-height for IE6*/

    as for min-max ,ie6 can't interpreted,so skip to read next properties /*height:100%*/

  8. #8
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi Luki_be,
    That min-height hack that your using for IE6 with the !important rule has been shown to cause the footer to stick in IE7. If you resize your browser window in IE7 and then drag the bottom of the viewport back to full height you will see the footer stick. When you remove all that filler text you have in there you will see what happens.

    Code:
    #wrapper {
      min-height: 100%; /* gives layout 100% height */
      margin: 0 auto; /* centers #wrapper */
      width: 700px; /* centered div must be given a width */
      background: #CCC;
      position:relative;
    }
    * html #wrapper { height: 100%;} /*min-height for IE6*/
    Hi Ray, yeah i never tested it in IE7 (lazy bugger lol) but in IE7 it removes the vertical scrollbar without any content. But seems to me that a page without content is something you don't see often

    But have you seen what removing the important rule does in ie7? No more sticky footer
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    Hi Ray, yeah i never tested it in IE7 (lazy bugger lol) but in IE7 it removes the vertical scrollbar without any content. But seems to me that a page without content is something you don't see often

    But have you seen what removing the important rule does in ie7? No more sticky footer
    The whole purpose of the Sticky Footer is that it works even when there is minimal content (or no content at all).

    Here is a screenshot of the Footer Hung Up in IE7 with the !important rule used.

    Most people using that method got it from the ryan fait demo which we are constantly having to fix around here because of the IE7 problem.

    Paul has explained everything Here in the FAQ's and given a link to his reliable method at the bottom of the article.

    Here are some more examples also

    Basic Sticky Footer
    Footer Clearing with Padding on Content Div

  10. #10
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    The whole purpose of the Sticky Footer is that it works even when there is minimal content (or no content at all).

    Here is a screenshot of the Footer Hung Up in IE7 with the !important rule used.

    Most people using that method got it from the ryan fait demo which we are constantly having to fix around here because of the IE7 problem.

    Paul has explained everything Here in the FAQ's and given a link to his reliable method at the bottom of the article.

    Here are some more examples also

    Basic Sticky Footer
    Footer Clearing with Padding on Content Div
    Hi Ray, on my IE7 the important rule doesn't produce the same effect as in yours:

    full content

    Ray content

    But in my former post i was a bit to hasty saying the IE6 trick removed the sticky footer. I forgot to remove the 100% height on #wrapper also

    Works nice now!

    Didn't know about that ryan fait demo.

    Btw, did you see what happens when you zoom to 50% in IE7

    Pauls' explanation i know but never managed to implement in a real project. Explanation: see my sig lol
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    You don't know it? Good. It's crap-he has been emailed several times to remove it as it doesn't work for the most part (good)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    Hi Ray, on my IE7 the important rule doesn't produce the same

    effect as in yours:
    I don't think you understood my browser viewport resizing explanation from post#6.

    If you resize your browser window in IE7 and then drag the bottom of the viewport back to full height you will see the footer stick.
    To explain further on that, Let's say I have my browser window set to 50% of its normal height . In XP when the window is resized the view port adjusts to the new dimensions, I may have to drag it up to 50% height the first time. But after that each time I reduce the viewport it goes to the height I last set it to by dragging it.

    Once you have that setting in place where it gives you less than its normal height each time you resize it then Drag it down to full height.

    You may think that it is going to extremes but it is called "Stress Testing". Just simply making sure that a layout holds together under any condition the user may create.

    I didn't tamper with the screenshot, that would be cheating.
    I just used your code - Luki Sticky Footer
    However, I did remove the margins from the H1 and H4 though because they were bleeding through and making a vertical scrollbar. I used paddings in place of the margins.

    Use the !important rule if you want to, it makes no difference to me. I just thought you might like to see how it fails in IE7.

  13. #13
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    I don't think you understood my browser viewport resizing explanation from post#6.

    To explain further on that, Let's say I have my browser window set to 50% of its normal height . In XP when the window is resized the view port adjusts to the new dimensions, I may have to drag it up to 50% height the first time. But after that each time I reduce the viewport it goes to the height I last set it to by dragging it.

    Once you have that setting in place where it gives you less than its normal height each time you resize it then Drag it down to full height.

    You may think that it is going to extremes but it is called "Stress Testing". Just simply making sure that a layout holds together under any condition the user may create.

    I didn't tamper with the screenshot, that would be cheating.
    I just used your code - Luki Sticky Footer
    However, I did remove the margins from the H1 and H4 though because they were bleeding through and making a vertical scrollbar. I used paddings in place of the margins.

    Use the !important rule if you want to, it makes no difference to me. I just thought you might like to see how it fails in IE7.
    Stress Testing can't be extreme enough. But i did understand what you meant by dragging (or atleast i think so ) but it just doesn't produce that failure at my end... Dragged it to 30%,20% and dragged the bottom back to full height but the footer kept sticking at the bottom of the viewport... but it was a quick mock up so it's probably far from perfect. Anyway the star html works also, probably even better

    Besides, don't worry if my testing doesn't produce the same effect in IE7 as yours.... when it comes to strange, unexplainable things.... i'm your man lol (as you might have noticed in my topic about my nav and logo problem lol)
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Besides, don't worry if my testing doesn't produce the same effect in IE7 as yours.... when it comes to strange, unexplainable things.... i'm your man lol (as you might have noticed in my topic about my nav and logo problem lol)
    As Ray said I can guarantee that the behaviour in IE7 is as exactly as Ray described

    I'm guessing that you aren't dragging the bottom of the window but dragging from a corner which will produce a refresh when the horizontal alignment is addressed.

    It's a small issue granted but when the cure is actually less code than the original hack it makes a lot of sense to use it (Besides I hate the !important hack as it's an ugly and unnecessary hack when there are cleaner methods about.)

  15. #15
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    As Ray said I can guarantee that the behaviour in IE7 is as exactly as Ray described

    I'm guessing that you aren't dragging the bottom of the window but dragging from a corner which will produce a refresh when the horizontal alignment is addressed.

    It's a small issue granted but when the cure is actually less code than the original hack it makes a lot of sense to use it (Besides I hate the !important hack as it's an ugly and unnecessary hack when there are cleaner methods about.)
    Nope, dragging indeed the bottom of the window but as i said, rays' solution works and i'm happy with it

    Besides, i've never been a fan of the important solution also or the 100% height/sticky footer stuff.
    "Sticky footer" tends to be fragile as it relies on the "minimum
    100% tall page" concept. I usually didn't bother with it since it is
    so easy to cause unwanted overlapping depending on the layout.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    "Sticky footer" tends to be fragile as it relies on the "minimum
    100&#37; tall page" concept.
    Yes the sticky footer is best suited for a small copyright and a few small links and works well in those cases. If you have a large footer then chances are you don't actually need a sticky footer because your page will likely already be below the fold.

    Either way you shouldn't get overlap of content if you have accounted for the dimensions correctly. However that is a major drawback in that you need to have a known height for the footer.

    I very rarely see a need to use a sticky footer as most sites I have coded this year (over 100) always have more than a viewport of content to start with anyway. It can be a useful technique though if you have very short content and it looks strange with the footer sitting high up the page.

    Nope, dragging indeed the bottom of the window
    I don't want to labour the point (and I'm not saying you are wrong exactly ) but all versions of IE7 exhibit the problem and I guess you didn't drag the page upward far enough until you observed the problem. The A lot of people have said the same as you only to come back later and say "yes you were right"

    However it's not a big issue and I can't actually see your page so I can't say whether you had something else in there causing a difference but Rays screenshot clearly shows it to be true and it is very unlikely that your computer is different. The bug can be fixed by re-stating certaiin properties so you may have tripped these to counteract the original problem.

    But nothing is ever certain in this game and you may in fact be right that it doesn't happen on your computer and in that case we are all wrong and apologise

  17. #17
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes the sticky footer is best suited for a small copyright and a few small links and works well in those cases. If you have a large footer then chances are you don't actually need a sticky footer because your page will likely already be below the fold.

    Either way you shouldn't get overlap of content if you have accounted for the dimensions correctly. However that is a major drawback in that you need to have a known height for the footer.

    I very rarely see a need to use a sticky footer as most sites I have coded this year (over 100) always have more than a viewport of content to start with anyway. It can be a useful technique though if you have very short content and it looks strange with the footer sitting high up the page.



    I don't want to labour the point (and I'm not saying you are wrong exactly ) but all versions of IE7 exhibit the problem and I guess you didn't drag the page upward far enough until you observed the problem. The A lot of people have said the same as you only to come back later and say "yes you were right"

    However it's not a big issue and I can't actually see your page so I can't say whether you had something else in there causing a difference but Rays screenshot clearly shows it to be true and it is very unlikely that your computer is different. The bug can be fixed by re-stating certaiin properties so you may have tripped these to counteract the original problem.

    But nothing is ever certain in this game and you may in fact be right that it doesn't happen on your computer and in that case we are all wrong and apologise
    Yeah sticky footers can be real 'sticky' sometimes . When it comes to those classic big ones with a lot of info, mixed with a liquid layout in %... fun times

    About the labouring point : i dragged the page almost totally upward but i'm thinking it could well be my IE7 app i use. It's a stand alone i grabbed here. It's executed everytime you click on it without actual installing on your system. Not exactly the best choice maybe but that's another OT story ...

    BTW, most of the time i'm wrong and the others are correct
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    It's a stand alone i grabbed here.
    Yes that sounds like it could be the likely problem. (The page is probably getting refreshed when you move the window which fixes the issue.)

  19. #19
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes that sounds like it could be the likely problem. (The page is probably getting refreshed when you move the window which fixes the issue.)
    Yup, probably better to upgrade IE and install 6 as a stand alone through the 'normal' procedure .... grrrrr
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


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
  •