Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Location
    Amsterdam
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    100% height but with margin (sticky footer)

    So i'm trying to get my head around this one.

    Basically what i want it a fixed width container div which expands to the bottom (100% height) but with a, let's say, 10px margin at the top. In addition there has to be a sticky 100% width footer which always shows at the bottom.

    The following html/css does exactly that without the margin at the top:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >

    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title>Test</title>
    <
    style type="text/css">
    html
    {
    height100%;
    }
    body
    {
    height100%;
    margin0 0 0 0;
    _height100%; /* for ie sux */
    }
    #nonFooter
    {
    width800px;
    marginauto;
    positionrelative;
    min-height100%;
    background-color#FF0000;
    }

    html #nonFooter
    {
    height100%;
    _height100%; /* for ie sux */
    }
    #footer
    {
    height:60px;
    positionrelative;
    margin-top: -60px;
    background-color:#FFFF00;
    }
    .
    clearer
    {
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    clear:both;
    }
    </
    style>
    </
    head>
    <
    body>

    <
    div id="nonFooter">
    Lorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor amet.
    Lorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor amet.
    Lorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor amet.
    Lorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor ametLorem ipsum dolor amet.
    </
    div>

    <
    div id="footer"></div>

    </
    body>
    </
    html
    Now, when i add a "margin-top: 10px;" in the #nonFooter i do get the margin, but as a side-effect a scrollbar appears. I've been trying with negative margins in pretty much all elements now, but none seem to solve the issue.

    As a bonus, the footer overlaps the text when the text gets to the bottom (noticable if you resize the window to a smaller size).

    I realised the footer isn't causing the "scrollbar" problem, as when you leave it out it still doesn't do what it's supposed to. Maybe i'm just looking for a way to have a div have a 100% height but having a margin at the top

    I've been googling and experimenting and only have a few hairs on my head left. So if anyone has a ephinany or sollution i would be ever so grateful with a cherry on top =)

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Are you trying for the below one?
    Code:
    #footer
    {
    height:60px;
    width:100%;
    position: absolute;
    bottom:0;
    background-color:#FFFF00;
    }
    Code:
    <div id="nonFooter">
    Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet.
    </div>
    <div id="footer"></div>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Sep 2007
    Location
    Amsterdam
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well ..

    Quote Originally Posted by Hyra View Post
    So i'm trying to get my head around this one.
    I realised the footer isn't causing the "scrollbar" problem, as when you leave it out it still doesn't do what it's supposed to. Maybe i'm just looking for a way to have a div have a 100% height but having a margin at the top
    So the footer isn't the problem, It's the margin on the container div that causes the scrollbar to appear.


  •  

    Posting Permissions

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