Tagged: bottom, fix, footer, socket, sticky footer
-
AuthorPosts
-
July 18, 2014 at 12:59 pm #292934
Hi
How do you fix at bottom windows the socket and footer element? I try this, but it’s not working :#footer {position:fixed; left:0px; bottom:50px; min-height:130px; width:100%; padding: 0px 0 0px 0; margin-bottom: -15px;} #socket { position: fixed; bottom: 0; width: 100%; z-index: 999; }
Thanks
July 18, 2014 at 3:30 pm #292996One way for solve, i add this :
#footer, #socket { -webkit-transform: translateZ(0); }
this tips solve a display problem (see my last topic solved ;) ) but now the socket and footer are “hide” when the content has a little height and come on the content when he has a big height.
thanks for help
July 19, 2014 at 4:02 am #293222Hi!
Thank you for visiting the support forum.
Try adding a bottom padding on the main content:
div#main { padding-bottom: 200px; }
Regards,
IsmaelJuly 21, 2014 at 11:06 am #293791This reply has been marked as private.July 21, 2014 at 6:27 pm #293952Hey!
Please edit the code Ismael posted and add media queries as following
@media only screen and (min-width: 990px) { div#main { padding-bottom: 200px; }}
Regards,
Yigit- This reply was modified 10 years, 3 months ago by Yigit.
July 22, 2014 at 2:14 pm #294338Yigit thanks for your help but its’nt work better than Ismael solution!
( and you missing 900px ;) )See the code now after your help :
#footer, #socket { -webkit-transform: translateZ(0); } #footer { position:fixed; left:0px; bottom:50px; min-height:130px; width:100%; padding: 0px; margin-bottom: -15px; } #socket { position: fixed; bottom: 0; width: 100%; z-index: 999; } @media only screen and (min-width: 990px) { div#main { padding-bottom: 200px; }}
Any idea? :)
thanks
July 23, 2014 at 2:24 am #294727Hey!
I think it would be more convenient and better to disable the fixed position on smaller screens:
@media only screen and (max-width: 767px) { #footer, #socket{ position: relative !important; } }
Cheers!
JosueJuly 23, 2014 at 3:27 pm #294968This reply has been marked as private.July 23, 2014 at 5:13 pm #295037Hi!
The fixed socket will not work. Please set the position back to “relative” if you don’t want to hide the content. If you want to set a min height for the content container div try this code:
#top .main_color.container_wrap.fullsize{ min-height: 300px; }
and replace 300 with any other positive px or % value if necessary.
Cheers!
PeterJuly 24, 2014 at 11:39 am #295361Ok it’s a Mc Gyver solution! ^^ (and if you’re many container this solution is broken)
I go to the Enflod’s wich list for a sticky footer ;)Thanks for all your helps, you can close this topic.
Sorry for the time loose :/Marc
-
AuthorPosts
- The topic ‘Fixed Socket et Footer ("sticky" footer)’ is closed to new replies.