Sticky Footer

The Sticky footer will use the HTML5 tag < footer > and make it "stick" to the bottom of the page. Simply add in < footer ></ footer > to your webpage with your desired styled content inside the < footer > tag. You may pre-style the < footer > in your css file. The stiky footer will remember your original styles if the page is not long enough to "stick" to the bottom of the page! Even after resize! There are no requirements for CSS! No 100% Body Height! You don't need a fixed height, or a wrapper!

It even works in mobile and tablet!

FAQ's as they come up.

Q: What about HTML 5 allowing for multiple footer tags?

A: Sticky Footer will only stick the last < footer > on your page.

Q: Do I need to apply 100% height to my body?

A: This has been changed from don't to does not matter. New sticky footer will still work with height 100%

Q: How do I span the full width of the browser with my footer in Foundation?

A: If you would like to have your footer span the full width of the browser, apply a style to the footer. footer { background-color:red; } This will give you a full width bar with a background color of red.

A more robust example being a 2 column grid respecting footer with a full width bg red and a margin top of 100px when the footer is longer than the height of the page.

*app.css*
footer { background-color:red; margin-top:100px }

*html*
<footer>
  <div class="row">
    <div class="columns medium-6">
      <p>I am the left side</p>
    </div>
    <div class="columns medium-6">
      <p>I am the right side</p>
    </div>
  </div>
</footer>

Q: Will this work with out Foundation?

A: Yes! This sticky footer will work with out Foundation. I build it with Foundation in mind cause that is what I use.

HELPERS:

Please DO NOT apply any classes to the footer IE < footer class="row" > If you would like your row content to respect the grid plase place the row and column(s) inside the < footer > tag. The stickyFooter will not work proprly if you class it with foundation's grid classes.

If you would like your footer to be 'hidden' before the sticky footer 'sticks' the footer at the bottom apply an inline style on your footer tag. This will eliminate a 'jump' in the footer to the bottom of the page.

 <footer style="visibility:hidden;">
 ... your footer code ...
 </footer>


Sticky Footer

粘性页脚将使用HTML5标签&lt;页脚&gt;并使其粘贴到页面的底部。 只需添加&lt;页脚&gt;&lt; / footer&gt;到您的网页,并在&lt;页脚&gt;标签。 您可以预先设计&lt;页脚&gt;在你的css文件。 stiky页脚将记住您的原始样式,如果页面不够长,粘到页面的底部!即使调整大小! 没有CSS的要求!没有100%身高! 你不需要一个固定的高度,或一个包装器!

甚至可以在手机和平​​板电脑上使用

FAQ's as they come up.

问:HTML 5允许多个页脚标签怎么样?

A:粘性页脚只会粘住最后一个页脚&gt;在您的网页上。

问:我需要对身体施加100%的身高吗?

答:这已经从不改变不重要了。新的粘性页脚仍然可以使用高度100%

问:如何使用我的页脚在基金会中跨越浏览器的全部宽度?

A:如果希望让页脚跨越浏览器的整个宽度,请将样式应用于页脚。 页脚{background-color:red; } 这将为您提供一个背景颜色为红色的全宽栏。

当页脚长度高于页面高度时,一个更强大的例子就是一个2列网格关注的页脚,其全宽为bg,边距为100px。

app.css
footer { background-color:red; margin-top:100px }

html <footer> <div class="row"> <div class="columns medium-6"> <p>I am the left side</p> </div> <div class="columns medium-6"> <p>I am the right side</p> </div> </div> </footer>

问:这是否与基金会合作?

A:是的!这个粘性页脚将与基金会合作。我建立基金会,因为这是我使用的。

HELPERS:

请不要将任何类应用到页脚IE&lt; footer class =row&gt;如果您希望您的行内容符合网格格式,则将行和列放在&lt;页脚&gt;标签。如果您使用基础的网格类进行分类,stickyFooter将无法正常工作。

如果您希望您的页脚在粘贴页脚粘贴之前被隐藏,底部的页脚将在您的页脚标签上应用内嵌样式。这将消除页脚底部的跳。

 <footer style="visibility:hidden;">
 … your footer code …
 </footer>




相关问题推荐