SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    Page height won't stay at 100% when window size decreases - Help

    For some reason that I am sure you all will see very quickly, I cannot make my site that I am currently working on stay at height 100%. As soon as you decrease the window size the footer comes up with the browser window and goes over text and everything else. Do I need to put content in first? I tried min-height but for some reason thats not working for me either. How do I remedy? Thanks - I used this footer tut to stick it to the bottom - http://www.alistapart.com/articles/footers

    Here is the page in question -
    http://www.buildingblockshomedaycare.com/sharp.html

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,347
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That's what using position: absolute in your footer will do - try adding some background colour to the footer div, it should them cover up anything it overlaps

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Yes but I do not want it to overlap anything. There is no way around the position absolute footer? Forentence, I want the page to have a min-height

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I used this footer tut to stick it to the bottom
    That's what you get for leaving Sitepoint and leaving the place where this technique was invented (by me ).

    The absolute footer technique is ok but not very stable. You only have to have a couple of javascript hide and shows or some dynamic content inserted and IE breaks really badly.

    In your code you made no provision for the absolute footer anyway. You need to preserve that space.

    Anyway you should use the following method which lets the footer stay in the flow and is much more stable.

    There are 3 main points:

    One the footer must have a height

    The negative margin on the outer must match the footer height to make room for the footer.

    The footer height must be preserved with either a fixed height clearer, or some padding on the element above, or as in this case using a top border on the header to soak up the space.

    Those three things work together to provide the technique.

    Here is the revised code.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    /* -------------------- Resets --------------------- */
    * {
        margin: 0;
        padding: 0;
    }
    fieldset, table {
        border: none;
    }
    /* --------------- Document Defaults -------------- */
    html {
        font-size: 100.01&#37;;
        height: 100%;
    }
    body {
        margin: 0 auto;
        height: 100%;
        font-size: 62.5%;
        font-family: Tahoma, Geneva, Arial, Helvetica, 'MS Sans Serif', sans-serif;
        background-color: #666666;
        color: #333;
    }
    /* ------------------ Typography ------------------- */
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.6em;
    }
    h3 {
        font-size: 1.4em;
    }
    p, li {
        font-size: 1.2em;
    }
    /* -------------------- Forms ---------------------- */
    input, label {
        vertical-align: middle;
    }
    label {
        cursor: pointer;
    }
    input, select, textarea {
        font-size: 1.2em;
        font-family: inherit;
        font-size: inherit;
    }
    input, textarea {
        padding: .2em;
    }
    /* -------------------- Tables --------------------- */
    table {
        table-layout: fixed;
        word-wrap: break-word;
        overflow: hidden;
    }
    /* ------------------- Template -------------------- */
    #wrapper {
        position: relative;
        margin: 0 auto;
        width: 720px;
        min-height: 100%;
        background-color: #CCCCCC;
        margin-top:-71px;/* space for footer*/
    }
    * html #wrapper{height:100%}
    #header {
        height: 120px;
        border-top:71px solid #ccc;/* preserve footer*/
    }
    #nav { 
        height: 15px;
        background-color: #666666;
        border-top: 1px solid #0FC;
        border-bottom: 1px solid #0FC;
        text-align: center;
    }
    #main {
    }
    #left {
    }
    #right {
    }
    #footer {
        height: 70px;
        width: 720px;
        border-top: 1px solid #666;    
        text-align: center;
        margin:auto;
        background:#ccc;
    }
    /* ------------------- Links ---------------------- */
    a {
        text-decoration: underline;
    }
    a:visited {
        text-decoration: underline;
    }
    a:active, a:focus, a:hover {
        text-decoration: none;
    }
    a img {
        border: none;
    }
    /* --------------------- Menus ---------------------- */
    /* Main Menu */
    ul#nav {
    }
    #nav li {
        display: inline;
        color: #000;
        font-weight: bold;    
        margin: 0 40px;
    }
    #nav li a {
        text-decoration: none;
        color: #000;
    }
    #nav li a:active, #nav li a:focus, #nav li a:hover {
        color: #0FC;
    }
    /* Footer Menu */
    #footer ul {
        margin-top: 20px;
    }
    #footer li {
        display: inline;
        margin: 0;
        font-size: 10px;
    }
    #footer li a {
        text-decoration: none;
        color: #333;
    }
    #footer li a:active, #footer li a:focus, #footer li a:hover {
        color: #0FC;
    }
    /* ---------------- Global Classes ----------------- */
    .center {
        text-align: center;
    }
    .clear {
        clear: both;
        padding: 0;
        margin: 0;
        line-height: normal;
    }
    .floatleft {
        float: left;
    }
    .floatright {
        float: right;
    }
    .hidden {
        display: none;
        visibility: hidden;
    }
    .inline {
        display: inline;
    }
    .small {
        font-size: 10px;
        font-weight: normal;
    }
    .large {
        font-size: 20px;
        font-weight: bold;
    }
    /* ----------------- Content/Pages ----------------- */
    #copyright { 
        font-size: 10px;
        color: #333;
        margin-top: 1px;
    }
        
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="nav">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">PORTFOLIO</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </div>
        <div id="main"></div>
    </div>
        <div id="footer">
            <ul>
                <li><a href="#">HOME</a> | </li>
                <li><a href="#">ABOUT</a> | </li>
                <li><a href="#">PORTFOLIO</a> | </li>
                <li><a href="#">CONTACT</a></li>
            </ul>
            <p id="copyright">Copyright &copy; 2006 - 2007 DiscountSiteDesign.com All Rights Reserved</p>
        </div>
    </body>
    </html>
    Note that the footer div is now outside of the wrapper and not contained within it.

    Also not you cannot use 100% height on the outer element it has to be min-height:100% (and height:100% for ie only). Read the faq on 100% height if you don't understand why.

    Also read the footer faq that I wrote specifically for topics like this You can see the footer technique in evidence in the 3 col demo sticky thread which is where I invented it years ago.

    Here is a basic demo.

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Paul. But the footer still comes up all the way to the nav - now it at least stops at the nav though. If I give the main div a height that keeps it down - is that OK to do - is that the only way to do it? Or should I just scrap that method and use your example or this one - http://www.dave-woods.co.uk/?p=170

    Thanks!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks for that Paul. But the footer still comes up all the way to the nav
    Either you have done it wrong or you asking for something different. The footer will stay at the bottom of the window or at the bottom of the document if the content is higher than the viewport.

    If you close the window upwards then the footer will stick to the bottom of the window but will stop as soon as it meets some content.

    You have not updated your page so I can't see what you think is wrong.

    I have given you the best method already and applied it to your code so all you had to do was copy and paste .

    Here it is a gain with some more content inside #main to show that it works.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    /* -------------------- Resets --------------------- */
    * {
        margin: 0;
        padding: 0;
    }
    fieldset, table {
        border: none;
    }
    /* --------------- Document Defaults -------------- */
    html {
        font-size: 100.01&#37;;
        height: 100%;
    }
    body {
        margin: 0 auto;
        height: 100%;
        font-size: 62.5%;
        font-family: Tahoma, Geneva, Arial, Helvetica, 'MS Sans Serif', sans-serif;
        background-color: #666666;
        color: #333;
    }
    /* ------------------ Typography ------------------- */
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.6em;
    }
    h3 {
        font-size: 1.4em;
    }
    p, li {
        font-size: 1.2em;
    }
    /* -------------------- Forms ---------------------- */
    input, label {
        vertical-align: middle;
    }
    label {
        cursor: pointer;
    }
    input, select, textarea {
        font-size: 1.2em;
        font-family: inherit;
        font-size: inherit;
    }
    input, textarea {
        padding: .2em;
    }
    /* -------------------- Tables --------------------- */
    table {
        table-layout: fixed;
        word-wrap: break-word;
        overflow: hidden;
    }
    /* ------------------- Template -------------------- */
    #wrapper {
        position: relative;
        margin: 0 auto;
        width: 720px;
        min-height: 100%;
        background-color: #CCCCCC;
        margin-top:-71px;/* space for footer*/
    }
    * html #wrapper{height:100%}
    #header {
        height: 120px;
        border-top:71px solid #ccc;/* preserve footer*/
    }
    #nav { 
        height: 15px;
        background-color: #666666;
        border-top: 1px solid #0FC;
        border-bottom: 1px solid #0FC;
        text-align: center;
    }
    #main {
    }
    #left {
    }
    #right {
    }
    #footer {
        height: 70px;
        width: 720px;
        border-top: 1px solid #666;    
        text-align: center;
        margin:auto;
        background:#ccc;
    }
    /* ------------------- Links ---------------------- */
    a {
        text-decoration: underline;
    }
    a:visited {
        text-decoration: underline;
    }
    a:active, a:focus, a:hover {
        text-decoration: none;
    }
    a img {
        border: none;
    }
    /* --------------------- Menus ---------------------- */
    /* Main Menu */
    ul#nav {
    }
    #nav li {
        display: inline;
        color: #000;
        font-weight: bold;    
        margin: 0 40px;
    }
    #nav li a {
        text-decoration: none;
        color: #000;
    }
    #nav li a:active, #nav li a:focus, #nav li a:hover {
        color: #0FC;
    }
    /* Footer Menu */
    #footer ul {
        margin-top: 20px;
    }
    #footer li {
        display: inline;
        margin: 0;
        font-size: 10px;
    }
    #footer li a {
        text-decoration: none;
        color: #333;
    }
    #footer li a:active, #footer li a:focus, #footer li a:hover {
        color: #0FC;
    }
    /* ---------------- Global Classes ----------------- */
    .center {
        text-align: center;
    }
    .clear {
        clear: both;
        padding: 0;
        margin: 0;
        line-height: normal;
    }
    .floatleft {
        float: left;
    }
    .floatright {
        float: right;
    }
    .hidden {
        display: none;
        visibility: hidden;
    }
    .inline {
        display: inline;
    }
    .small {
        font-size: 10px;
        font-weight: normal;
    }
    .large {
        font-size: 20px;
        font-weight: bold;
    }
    /* ----------------- Content/Pages ----------------- */
    #copyright { 
        font-size: 10px;
        color: #333;
        margin-top: 1px;
    }
        
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="nav">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">PORTFOLIO</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </div>
        <div id="main">
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
    </div>
    <div id="footer">
        <ul>
            <li><a href="#">HOME</a> | </li>
            <li><a href="#">ABOUT</a> | </li>
            <li><a href="#">PORTFOLIO</a> | </li>
            <li><a href="#">CONTACT</a></li>
        </ul>
        <p id="copyright">Copyright &copy; 2006 - 2007 DiscountSiteDesign.com All Rights Reserved</p>
    </div>
    </body>
    </html>
    The method used above neater than the one that Dave is using (which is my old method anyway) because it doesn't need a clearfooter as that has been applied more neatly to the header element.

    Hope that makes sense

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Duh? Thanks Paul, that works, I just needed to add some content to it. One last question though - now that this method works well, was is the advantage of using the other methods rather than this one to stick the footer?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    was is the advantage of using the other methods rather than this one to stick the footer
    If you want a sticky footer then my method is the best. All other methods are derived from my original anyway. The concept is the same in that you make a 100&#37; high element and then you reduce it with negative margins to make way for a footer and then you preserve the footer space somehow.

    The absolute footer works in simple situations but in dynamic situations breaks badly in IE.

    If you don't need a sticky footer then you don't need any of the above and just place your footer after the content.

    The drawback of the sticky footer is that you have to work with a specific height to make it work which is why its usually best for narrow height footers with a few links and copyright messages etc.

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ya I ditched the position absolute footer and went with yours - much better. Thanks a lot for your help Paul, I really appreciate it! Your personal site is awesome and I can't wait to read all your articles. Much thanks - Eric W


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
  •