Forums

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

Home › Forums › CSS › footer always on the bottom

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • July 10, 2014 at 2:02 am #175123
    roelof
    Participant

    Hello,

    Last problem before I can use the layout in production.

    I have now this : http://test2.tamarawobben.nl

    But as you can see if there is not so many content, the border is not at the bottom of the screen.

    Is there a css-trick to take care of this problem ?

    Roelof

    July 10, 2014 at 2:26 am #175124
    Paulie_D
    Member

    Yes, try googling Sticky footer or just see here…

    https://css-tricks.com/snippets/css/sticky-footer/

    July 10, 2014 at 2:44 am #175128
    roelof
    Participant

    I have looked at that one but my footer does not have a height.
    It appears that the height is made by padding 0 3em 0 4em

    Roelof

    July 10, 2014 at 2:47 am #175130
    Paulie_D
    Member

    Other than flexbox you will have trouble then. You could use absolute positioning but that’s a little inflexible too.

    What’s wrong with giving the footer a height?

    July 10, 2014 at 3:30 am #175131
    roelof
    Participant

    hello,

    I did try your suggestion but now I see a white area between the main section and the footer section.

    See again : http://test2.tamarawobben.nl

    July 10, 2014 at 3:52 am #175134
    Paulie_D
    Member

    My guess is that you haven’t followed the instructions properly.

    Have you set the HTML & body heights as required..because it doesn’t look like it?

    Have you added a wrapper etc?

    July 10, 2014 at 3:55 am #175135
    roelof
    Participant

    Hello,

    As far as I know I did follow the instructions on this page: https://css-tricks.com/snippets/css/sticky-footer/

    And there is no mention of a wrapper.

    Roelof

    July 10, 2014 at 3:58 am #175136
    Paulie_D
    Member

    It’s implicit in the HTML structure.

    <div> /* see here !! */

  Content!

</div>
<footer class="site-footer">
  I'm the Sticky Footer.
</footer>
    July 10, 2014 at 4:07 am #175137
    roelof
    Participant

    yep,

    page-wrap is called main here. That is already a wrapper
    and site-footer is called footer.

    So I added or changed the css according to that page but to my own classes.

    Roelof

    July 10, 2014 at 4:24 am #175138
    Paulie_D
    Member

    The page-wrap suggested has to come immediately after body and wrap ALL elements excluding the footer.

    Yours does not.

    Your ‘main’ div is just one of several inside the <body>.

    July 10, 2014 at 9:03 am #175156
    paulob
    Participant

    Hi,

    For IE8+ you can do this very easily without needing to have any set heights on the footer which is ideal in a responsive design and needs no pushers, margins or space saving techniques.

    http://codepen.io/paulobrien/full/FKAxH/

    Remember though that you cannot nest the main wrapper or place it below other content because 100% is from top to the bottom and if you nest inside another element you will get height:auto and if you place it below another element in the flow you get 100% from where it starts leading to the footer going below the fold.

    You would just need to put your layout inside the above structure. Here is an example with a left fixed column:

    http://codepen.io/paulobrien/full/gGuEm/

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