SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Container and footer issues :(

    Hi guys - I am just picking html and css back up after a decade long break. I am having a lot of trouble trying to define a few sections within my main page template. Basically I would like my footer to stay at the bottom and my 'section' to take up at least the remainder of the screen between the header+nav and the footer.

    When I set the section to height:100% it expands to the height of the body, thus giving me a scrollbar. I would like not to have a scroll.

    If I could get the section to take up the blank space in the middle of the screen it would probably solve my next issue as I could change my footer from absolute positioning. I don't want the footer to be a 'sticky footer', I just want it to be at the very bottom of the page.

    I appreciate any other feedback regarding my coding also. My preview site can be viewed at http://www.syrax.net/preview/

    FYI - I would like the header and footer to remain full width.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi paulc101. Welcome to the forums.

    There are different definitions of a "sticky footer", and we have a nice tutorial here in the CSS FAQ section for doing exactly what you want:

    http://www.sitepoint.com/forums/show...66#post1239966

    It is called a sticky footer, but in this version, the footer will drop off the screen if the content is taller than the viewport, so it's not one of those footers that's always visible (which I assume is what you wanted to avoid).

    CSS isn't well suited for doing this kind of footer, so you have to be pretty careful to follow the tutorial carefully, as it has been carefully crafted.

    Let us know how you go with it.

  3. #3
    Non-Member
    Join Date
    Apr 2013
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    setting the height to 100% tells the browser to set the element's height to take up the complete browser's height. Define a definite height eg, 100px or something. If you want it to be added in percentages, then use something like 20%. if you want the header and footer to take up the full width then define the width as 100% not the height.

    why don't you try to position the footer to the bottom using

    position:absolute;
    bottom:0px;

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

    As Ralph said it looks like you want a sticky footer much like this one. Make sure you read read the CSS faq as it supplies fulld etails on how this works (also read the entry on 100% height and why you can't really use it).

  5. #5
    SitePoint Member
    Join Date
    May 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all! I managed to get it working, it's not live on the site as I keep my working files on my hard drive.

    Thanks all for the help

  6. #6
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is exactly what I tried to do, however I have enough content on one of my pages that the footer is stuck in the middle of the page and doesn't actually stick to the bottom of the page. How do I fix that? I have tried clearfix but it is not working! I am getting very frustrated.

    Quote Originally Posted by shamshadali View Post
    setting the height to 100% tells the browser to set the element's height to take up the complete browser's height. Define a definite height eg, 100px or something. If you want it to be added in percentages, then use something like 20%. if you want the header and footer to take up the full width then define the width as 100% not the height.

    why don't you try to position the footer to the bottom using

    position:absolute;
    bottom:0px;

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by FSDMedia View Post
    This is exactly what I tried to do ...
    If it's not working, it means you didn't follow the links above accurately. If you post a link, we can look at what you've done.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by FSDMedia View Post
    This is exactly what I tried to do,
    It looks like you are following the wrong advice from the "quote" you posted as that advice is incorrect. Look at the links that Ralph and I have posted instead as they contain the correct information.

    If you have a link or some code then we can give more specific advice and help with this issue.


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
  •