Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS A footer puzzle

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #38516

    Hi all,

    I am having an issue with trying to get a footer idea to work correctly. In essence, I want a header section, content section and footer. The footer is to always be displayed at the bottom of the screen, and the content box will resize if the page is made shorter.

    I have that functionality working, however I’m getting issues when the page requires the user to scroll.

    The example, and subsequent problem can be seen here

    I would like the scrollbar to appear in the regular position in the browser, but can’t seem to get the footer and content box to play nicely together.

    Here is the CSS that relates to those elements…

    html,
    body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: auto;
    }

    #wrap-body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    }

    #wrap-content {
    padding: 0px;
    position: absolute;
    top: 148px;
    bottom: 53px;
    left: 15px;
    right: 15px;
    }

    #content {
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    overflow: auto;
    }

    footer {
    width: 100%;
    position: absolute;
    bottom: 3px;
    padding: 0px;
    height: 50px;
    }

    If anyone can point me in the direction of a solution that would be fantastic!

    Many thanks,

    Steve

    #104428
    Paulie_D
    Member

    I’m not seeing a problem…the header stays where it is and so does the footer and the scrollbar is in the right position for the content.

    If you want the scrollbar to be in the usual place for the viewport I think you will have to use a different “sticky footer” technique.

    #104429

    Thanks for the reply, I should have been a bit more specific, I was referring to the scrollbar in position to the viewport.

    Just off the top of my head, would something along these lines be the way to go?



    (padding top/bottom to match header/footer)

    (positioned absolute to top)


    (height 100%)


    (positioned absolute to bottom)




    #104431
    filipeb
    Member

    perhaps something along the lines of the following?


    html {
    margin: 0;
    padding: 0;
    height: 100%;
    }

    body {
    margin: 0;
    padding: 150px 0 55px 0;
    height: 100%;
    }

    #wrap-body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    }

    #wrap-content {
    padding: 0px;
    position: absolute;
    top: 148px;
    bottom: 53px;
    left: 15px;
    right: 15px;
    }

    #content {
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    }

    footer {
    width: 100%;
    position: absolute;
    bottom: 3px;
    padding: 0px;
    height: 50px;
    }
    #104434

    Unfortunately, that causes the page to extend beyond the footer, causing scroll bars to be constantly displayed.

    I have done some tweaking, but am now facing a different problem, the scrollbar is now on the body of the page rather than just that section, but the div doesn’t resize properly.

    Viewable live here

    Thanks.

    #104437
    Paulie_D
    Member

    Unfortunately, I think you’ll have to re-think.

    See here for Sticky footer.: https://css-tricks.com/snippets/css/sticky-footer/

    #104438

    I’ve done a similar thing before, but that was using solid colour backgrounds. With the transparent backgrounds, it makes the need for things to be tidy much more important. I’ll keep thinking!

    #104439
    filipeb
    Member

    sorry it’s my bad. on my css you’d need to get the footer and the header’s position set to fixed.

    #104442

    No worries filipeb, I’d put that in anyway when I was playing around with it.

    I’ve come from a flash background, so just assume that certain things are possible. In this case, being able to set the content container to be a mask, so that content can flow down the page as far as it needs to without appearing underneath the footer, was what I’d assumed to be possible.

    I’m sure I’ll find a way round it ;)

    #104444
    filipeb
    Member

    Just to clear it up (in case I’m mis-understanding you), is something like this that you are looking for? http://jsfiddle.net/fXXrb/

    If so, I think that example shows what you can do, but it was with a static background. With a dynamic image background aI’m not really sure how you could achieve the same effect.

    #104445

    Yes, that’s pretty much it, which I’ve achieved in the past. In this instance, as I have a full-screen background image, I can’t use a background-color to hide any overlapped content.

    I’m going to try and use a css mask on the content box to hide any overflow, but still allow scrolling.

    #104448
    filipeb
    Member

    I was trying to figure this out. Do you think something similar to this might work for you? It basicly involves re-using the image as a background for the footerHider div.
    http://jsfiddle.net/fXXrb/2/

    #104450

    That looks spot on, I’ll get round to implementing that and see how visible the edges of the re-used image is, hopefully the diagonal lines will help hide any tear.

    Thanks for the help!!

    #104452
    filipeb
    Member

    No problem. Glad to be of help! :D

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.