- This topic is empty.
July 10, 2014 at 2:02 am #175123
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 ?
RoelofJuly 10, 2014 at 2:26 am #175124
Yes, try googling Sticky footer or just see here…July 10, 2014 at 2:44 am #175128
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
RoelofJuly 10, 2014 at 2:47 am #175130
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
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.nlJuly 10, 2014 at 3:52 am #175134
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
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.
RoelofJuly 10, 2014 at 3:58 am #175136
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
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.
RoelofJuly 10, 2014 at 4:24 am #175138
The page-wrap suggested has to come immediately after
bodyand 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 #175156paulobParticipant
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.
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:
- You must be logged in to reply to this topic.