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 12 of 12
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to fix position of the Footer?

    How can I make the footer stay at the bottom of my page? Right now, in the body, I can load different reports with different heights and if a report is very short, the footer jums up to the middle of the page (or screen)!

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Are you wanting:

    1. The footer to stick to the bottom of the browser window all the time as content scrolls underneath (a la Facebook)?
    2. The footer to stick to the bottom of the browser window until there's enough content to fill the window and cause it to scroll, at which point the footer sticks to the bottom of the content?

    If #1, use absolute positioning:

    Code:
    #footer {
      position:absolute;
      bottom:0;
    }
    If #2, use the sticky footer method (wow, that just sounds dirty, doesn't it?)
    matt | design | blog

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your response. I need to implement #2. So I followed the second solution. It helped and the footer moved down a little but not all the way! So, I still need to investigate why the footer is still floating in my servlet application. Any idea? Thanks.

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    We'll need a link to your page (preferable) and/or your full code (HTML and CSS), posted in [CODE][/CODE] tags.
    matt | design | blog

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Unfortunately I cannot give the link to the page since it's not my own page and it's company's proprietary. However, here is the code for the main body tag:

    <body>
    <div class="wrapper">
    <tiles:insert attribute="header"/>
    <tiles:insert attribute="navigation"/>
    <tiles:insert attribute="body"/>
    </div>
    <div class="push"></div>

    <div class="footer">
    <tiles:insert attribute="footer"/>
    </div>

    </body>

    The attribute "body" is replaced by different jsp panels based on the user selection. Each jsp start with a table tag. Hope this is useful info! Thanks.

  • #6
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Edit: Try putting #push inside #wrapper:

    Code:
    <body> 
    <div class="wrapper">	
    <tiles:insert attribute="header"/>
    <tiles:insert attribute="navigation"/>
    <tiles:insert attribute="body"/>
    <div class="push"></div>
    </div>
    
    <div class="footer">
    <tiles:insert attribute="footer"/>
    </div>
    
    </body>
    If that doesn't work, post your CSS.
    matt | design | blog

  • #7
    New Coder
    Join Date
    Feb 2009
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It did not work!
    The css file is huge! But here is what I have changed for this problem:

    .html {
    height: 100%;
    }

    .body {
    height: 100%;
    color: #333333;
    margin: 0px;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    }

    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142em;
    }
    .footer, .push {
    height: 142px;


    }

  • #8
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    You have mismatched units:

    Code:
    .wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%;
    margin: 0 auto -142em; 
    } 
    .footer, .push { 
    height: 142px; 
    }
    Try changing it to:

    Code:
    margin: 0 auto -142px;
    Also make sure #push is inside #wrapper as recommended above. That's the required div structure.
    matt | design | blog

  • #9
    New Coder
    Join Date
    Feb 2009
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for noticing the units. I fixed them. But still it is not working. I created a simple html page and this method worked for it, but not this application. It seems that the body portion does not get the 100% height, I don't know why. I think that's why footer jumps up.

  • #10
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    All the code you posted works fine in my test file. In other words, we can't do much more without a link to your page or your complete code (HTML and CSS). There's probably something else getting in the way.
    matt | design | blog

  • #11
    New Coder
    Join Date
    Feb 2009
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am sure there is something in the code. This is an old application that many people have worked on it and it's poorly designed! Let me see what I can find in this mess!
    Thank you for your help and your time.

  • #12
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm intrigued about option 1. How do you get that to work? At the moment, on a long page the page continues underneath it.

    Bless,
    Chris


  •  

    Posting Permissions

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