Skip to main content

Forums

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #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

    #175124
    Paulie_D
    Moderator

    Yes, try googling Sticky footer or just see here…

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

    #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

    #175130
    Paulie_D
    Moderator

    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?

    #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

    #175134
    Paulie_D
    Moderator

    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?

    #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

    #175136
    Paulie_D
    Moderator

    It’s implicit in the HTML structure.

    <div> /* see here !! */
    
      Content!
    
    </div>
    <footer class="site-footer">
      I'm the Sticky Footer.
    </footer>
    
    #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

    #175138
    Paulie_D
    Moderator

    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>.

    #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/

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.
icon-link icon-logo-star icon-search icon-star