Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="app">
<div id="wrapper">
  <section class="section">
  <h1 class="title">Bulma Sticky Footer</h1>
  </section>
  <section class="section">
  <p class="content">
    An example that keeps a footer to the bottom of the page if the page is light on content.  The footer will push down if there is sufficient content on the screen.  Vue is emphasized since an outer #app wrapper is needed to potentially fill the main container and the footer with dynamic content.
    </p>
      <p class="content">
        Click the button below to see how the footer behaves when there is much more content.
  </p>
      <button class="button" @click="showContent = !showContent">Show More</button>
  </section>
  <section class="section" v-if="showContent">
<p class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan aliquet facilisis. Nullam semper, risus non malesuada volutpat, mi odio molestie ligula, condimentum ultricies sem eros sed urna. Nulla facilisi. Fusce mattis, felis ac tempus vulputate, nisl ex hendrerit urna, ut sagittis nisl nunc sit amet sem. Integer ligula metus, ullamcorper sit amet fermentum et, ultrices vitae lacus. Vivamus in leo accumsan, fermentum orci vel, hendrerit ipsum. In hac habitasse platea dictumst. Suspendisse placerat mollis efficitur. Aliquam posuere lacus ut libero laoreet dignissim. Quisque at ipsum dictum, feugiat tortor sed, malesuada ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed id mi lacinia, rhoncus nulla vitae, maximus lorem. Suspendisse egestas efficitur justo, vitae sollicitudin felis porta eget. Proin massa nulla, venenatis non turpis id, fermentum gravida nulla. Duis vel felis ac dui mattis aliquam et et nibh.
  </p><p class="content">
Quisque pharetra lorem id ex lacinia eleifend. Etiam consequat orci ipsum, vitae interdum sem fermentum dapibus. Sed blandit, arcu euismod dictum facilisis, libero ligula rutrum quam, in iaculis mi augue a ante. Donec nec ex ac quam suscipit tincidunt vitae id nibh. Cras porttitor sodales mauris, pretium blandit mauris. Fusce vel varius lacus. Aenean urna sapien, tristique sed feugiat quis, iaculis ac ipsum. Suspendisse nulla tortor, tempor vitae hendrerit in, accumsan vitae augue. Donec pharetra enim vel suscipit vulputate. In eget dapibus mi. Ut ut rutrum nibh. Duis sit amet felis in nisl congue porttitor. Vivamus consequat, dui ac tempus euismod, tortor diam sodales odio, vitae cursus ligula nisi molestie leo. Etiam iaculis mauris et nunc varius sagittis. Aliquam erat volutpat.
  </p><p class="content">
Aenean ut sapien augue. Pellentesque in mollis nisl. Duis euismod magna at tellus fermentum, non vulputate sapien consequat. Sed eu massa eu felis dapibus sodales nec at lacus. In quis elementum lorem. Phasellus et rutrum metus. Pellentesque nulla odio, varius nec dolor vitae, ullamcorper auctor turpis. Aliquam eu libero at tortor vulputate ultrices sit amet nec sem.
  </p><p class="content">
Curabitur eleifend consectetur ante, eget maximus lacus tristique sit amet. Nulla iaculis pharetra velit sed accumsan. Aliquam cursus, mi sit amet porta faucibus, risus mi feugiat ipsum, nec pellentesque enim risus at turpis. Nulla placerat feugiat feugiat. Maecenas convallis pulvinar velit ut elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut feugiat porta maximus.
  </p><p class="content">
Nullam vitae lobortis felis. Curabitur molestie aliquam lacinia. Duis accumsan risus eget orci bibendum volutpat. Vivamus vitae nisi eget velit pulvinar mattis. Aliquam tempus sed ante non mattis. Pellentesque quis felis euismod, rutrum lectus et, interdum eros. Aenean sodales erat sed porttitor pellentesque. Integer rutrum elit vel urna tempus lobortis. 
  </p>
  </section>
</div>
<footer class="footer">
  My Footer Here (At Bottom Unless Content Expanded)
</footer>
</div>
              
            
!

CSS

              
                html, body, #app {
  height: 100%;
}
#app {
  display: flex;
  flex-direction: column;
}
#wrapper {
  flex: 1 0 auto;
}

.footer {
  flex-shrink: 0;  
}
              
            
!

JS

              
                new Vue({
  el: "#app",
  data: {
    showContent: false
  }
})
              
            
!
999px

Console