Forums

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

Home Forums CSS Fixed Header/Footer Layout issues : (

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #149857
    GZA
    Participant

    I have a header and footerDIV that are both 100% .footer uses the “sticky” technique to keep it pushed down and i just set the .header-wrap to 100% relative top:0px; I have a .container that is full-height and 960px in width it is used in combination with the .footer to keep it ‘fixed’ at the bottom.

    For some reason, after adding the .header-wrap the .container seems to have too much white space which is causing a scrollbar to appear when there is only a 2 paragraphs of of text inside it.

    How can I make the .container element the right size, so the footer stays fixed at the bottom and the .header-wrap fixed also without the scrollbar? I’m also hoping it is works in IE8 if possible.

    Example of problem: http://jsfiddle.net/A9vVX/7/embedded/result/ (You can use ‘Fork’ to create a copy)

    Source http://jsfiddle.net/A9vVX/7/

    (I’m aware the embedded results causes a scrollbar on jsfiddle because of the frame, but its the the one in my code)

    I’ll post the code here if needed!

    i asked elsewhere but nobody seemed to have a clue.

    Thank you.

    #149985
    GZA
    Participant

    I’ve close .header-wrap before the footer with a height of 100% its still not working.

    http://jsfiddle.net/4EG4g/3/

    I’ve also tried to put a div just after it.

    #149991
    Paulie_D
    Member

    http://techtalk.virendrachandak.com/sticky-header-and-footer-using-css/

    Be aware that this solution requires that the header is always visible so it may not be precisely what you are after.

    I havent any solution that will do exactly what you are after.

    Except flexbox of course. :)

    #149997
    GZA
    Participant

    Yes that seems to be right!

    I guess the push hack is unnecessary when you have both a header and footer fixed with relative positions. Just one problem when there is a lot of content the scrollbar seems to be only flowing with the container. Is there a way to make it natural so the footer moves also?

    #149914
    GZA
    Participant

    Any idea why its not working?

    `

    `

    `.push {height: 100px;display: block;}
    .push{height:100%}

    * {margin: 0;}
    html, body {height: 100%;}
    .header-wrap {
        min-height: 100%;
        margin-bottom: -100px;
        max-height: 100%;
        background-color: #3CF;
    }
    push:after {content: ""; display: block;}
    .footer, .push :after {
        /* same as footer */ height: 100px;
    }
    
    
    .footer {
        background-color: #262626;
    }`
    
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.