神刀安全网

Quick Tip: The Best Way To Make Sticky Footers

Danny Markov

Demo Download

While developing web layouts, at some point you’ve probably run into this issue:

Quick Tip: The Best Way To Make Sticky Footers

This obviously broken layout happens when a footer is positioned statically at the end of the body, but the page doesn’t have much content. There is nothing to push the footer down enough and it stays in the middle of screen, leaving a huge area of whitespace below it.

In this quick tutorial we’re going to take a look at a modern technique for building footers that are guaranteed to stick to the bottom of the page at all times.

The Technique

To prevent the above from happening we will be building our page using flexbox, the most advanced tool CSS3 has to offer for building adaptive layouts. For those of you not familiar with the flexbox model and its properties, we will leave a couple of links at the end of the article.

Our simple demo page will have a header, main section, and a footer. Here is the HTML, nothing extraordinary there.

<body>     <header>...</header>     <section class="main-content">...</section>     <footer>...</footer> </body>

To enable the flex model we add display: flex to the body, and change the direction to column (the default is row, which is a horizontal layout). Also, the html and body will need 100% height to fill up the whole screen.

html{     height: 100%; }  body{     display: flex;     flex-direction: column;     height: 100%; }

Now we need to adjust how much space each section will take up. We’ve done this via the flex property, which bundles together three flex- specs into one:

  • flex-grow –  Defines how much of the available free space in the container goes to an element.
  • flex-shrink – How much an element will shrink when there isn’t enough space for everything.
  • flex-basis – The default size for an element.

We want our header and footer to take up just as much space as they need, and everything else to be reserved for the main content section. The CSS for such layout looks like this:

header{    /* We want the header to have a static height,     it will always take up just as much space as it needs.  */    /* 0 flex-grow, 0 flex-shrink, auto flex-basis */    flex: 0 0 auto; }  .main-content{    /* By setting flex-grow to 1, the main content will take up     all of the remaining space on the page.     The other elements have flex-grow: 0 and won't contest the free space. */    /* 1 flex-grow, 0 flex-shrink, auto flex-basis */    flex: 1 0 auto; }  footer{    /* Like the header, the footer will have a static height - it shouldn't grow or shrink.  */    /* 0 flex-grow, 0 flex-shrink, auto flex-basis */    flex: 0 0 auto; }

To see this technique in action, check out our demo page by clicking the image below. Using the big pink button you can change the amount of content to help you observe how the layout adapts and pushes the footer to the bottom at all times.

Quick Tip: The Best Way To Make Sticky Footers

Conclusion

As you can see flexbox is a powerful ally when building layouts from scratch. All mainstream browsers support it, with a few minor exceptions, so its pretty much safe to use it in all IE9+ projects – Can i use flexbox .

Here are a some awesome lessons and cheatsheats for learning more about the flexbox layout model:

  • A quick guide to flexbox by CSS-Tricks – here .
  • Solved by Flexbox, a website dedicated to cool flexbox techniques – here .
  • 5-minute interactive lesson – here .

We hope you liked our way of creating sticky footers and that you’ve picked up something new and useful from the article. Leave us a comment if you have a cool flexbox trick of your own!

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to createbeautiful interfaces using the Bootstrap Framework.

Quick Tip: The Best Way To Make Sticky Footers Quick Tip: The Best Way To Make Sticky Footers Quick Tip: The Best Way To Make Sticky Footers

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Quick Tip: The Best Way To Make Sticky Footers

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮