StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to make footer stick to bottom of wrapper with bottom margin?
primarykey
Id
10309563
data
AcceptedAnswerId
0
AnswerCount
2
ClosedDate
CommentCount
3
CommunityOwnedDate
CreationDate
2012-04-25T04:58:44.900
FavoriteCount
0
LastActivityDate
2014-02-27T04:05:49.620
LastEditDate
2014-02-27T04:05:49.620
LastEditorUserId
771978
OwnerUserId
1196182
ParentId
0
PostTypeId
1
Score
0
ViewCount
8942
LastEditorDisplayName
text
Body
<p>I´m trying to make a footer that sticks to the bottom of wrapper, but leaving a bottom margin so that the pattern image on the body background can be seen.<br> I came accross the sticky footer at </p> <p><a href="http://ryanfait.com/resources/footer-stick-to-bottom-of-page/" rel="nofollow">http://ryanfait.com/resources/footer-stick-to-bottom-of-page/</a></p> <p>which worked great, but all my attempts of adding margin/paddings to footer/ wrapper/ body didn´t.</p> <p>I guess it must be a pretty simple thing, but I´m not finding it. Thanks for any hints/ suggestions!</p> <p>Here´s the relevant CSS:</p> <pre><code>* { margin: 0; } html, body { margin-top: 0px; margin-bottom: 25px; background-repeat: repeat; background-image: url(images/modulo-pattern-grey-light.gif); height: 100%; } #wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -98px; background: #fff url(images/footer.gif) left bottom no-repeat; width: 980px; box-shadow: 4px 4px 5px #999; } .footer, .push { height: 98px; } .footer { margin-left: 490px; margin-right: 40px; background-color: #bc4c9b; } </code></pre> <p>HTML:</p> <pre><code><div id="wraper"> <div class="header"></div> <div class="logo"> </div> <div class="menu_container"> <div class="main_menu"> <ul> <li><a href="index.html">Home</a></li> <li><a class="selected" >Quiénes Somos</a></li> <li><a href="consultoria.html">Consultoría</a></li> <li><a href="capacitacion.html">Capacitación</a></li> <li><a href="academico.html">Académico / Artículos</a></li> <li><a href="alianzas.html">Alianzas</a></li> <li><a href="proyectos.html">Proyectos</a></li> <li><a href="contacto.html">Contacto</a></li> </ul> </div> </div> <div class="quienes_pic"></div> <div class="quienes_text"></div> <div class="push"></div> </div> <div class="footer"></div> </code></pre> <p>Sorry I didn´t mention, but Fixed position won´t work, since I want the same footer to work on different pages with differents heighs. The idea was to have the same wraper and footer through all the pages, and then assigning different body ids to set the different heighs</p> <p>Pretty much like is done through this site:</p> <p><a href="http://www.casadelviento.com.ar/" rel="nofollow">http://www.casadelviento.com.ar/</a></p> <p>In this case, it´s using different body ids AND different wrappers, I thought may be it could be done with less code and more clear (i.e I don´t understand why is the difference between the wraper heigh <code>#contenido-index</code> and the body heigh)</p> <pre><code>#contenido-index { background-color: #FFF; height: 2040px; width: 900px; margin: 0 auto; } #contenido-chicos { background-color: #FFF; height: 2760px; width: 900px; margin: 0 auto; } #contenido-adultos { background-color: #FFF; height: 2810px; width: 900px; margin: 0 auto; } #contenido-somos { background-color: #FFF; height: 2150px; width: 900px; margin: 0 auto; } #contenido-historia { background-color: #FFF; height: 980px; width: 900px; margin: 0 auto; } #contenido-horarios { background-color: #FFF; height: 967px; width: 900px; margin: 0 auto; } #contenido-contacto { background-color: #FFF; height: 750px; width: 900px; margin: 0 auto; } #contenido-videos { background-color: #FFF; height: 820px; width: 900px; margin: 0 auto; } #contenido-fotos { background-color: #FFF; height: 595px; width: 900px; margin: 0 auto; } #body-index { height: 2160px; } #body-somos { height: 2070px; } #body-historia { height: 1150px; } #body-horarios { height: 1060px; } #body-chicos { height: 2700px; } #body-adultos { height: 2800px; } #body-videos { height: 960px; } #body-fotos { height: 740px; } #body-contacto { height: 880px; } /*FOOTER}*/ #contenedor_pie { height: 40px; width: 500px; float: left; margin-left: 20px; margin-top: 15px; } </code></pre>
Tags
<html><css><margin><footer><sticky-footer>
Title
How to make footer stick to bottom of wrapper with bottom margin?
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USRodrigo
UserOwnerUserId
1. USeliana
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POHow to make footer stick to bottom of wrapper with bottom margin?
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTApproveEditSuggestion
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.