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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <header class="header">
  <h1>Fluid Height Fixed Header: <span>This header uses position:sticky for modern browsers but uses position:fixed for older browsers.</span></h1>
</header>
<div class="wrap">
  <p><b>First Item under sticky :</b> Rather than use position:fixed for a fixed header use position:sticky instead and then the height of the fixed element can be fluid and you don't need to account for changes in the header height or pad out other elements with
    magic numbers to match the header height. Position:fixed fails miserably in responsive sites if text wraps, the height changes or text is zoomed. Position:sticky suffers from none of those things. This example uses position:sticky for a fluid header
    but falls back to a fixed height fixed header in older browsers. To be honest a better fallback would be simply to let the header scroll away which means you don't actually need to do anything at all extra when using position:sticky. Note that IOS
    still needs the prefix position:-webkit-sticky.</p>
  <p>For older browsers you could improve the smaller screen views by utlizing a number of media queries to change height to fit the content better but ultimately a user could simply zoom the text and break the display anyway. Using ems for height and padding
    could offset that effect (older browsers don't like rems so be careful when supporting older browsers).</p>
  <p>The position:sticky version needs none of the above hacks and caters for any change in size automatically. NOTE that mobile devices hate fixed positioned elements but have implemented position:sticky much better and in a more usable way.</p>
  <p>I should mention that fixed positioned elements are a slight accessibility problem in that they interfere with the natural flow of the document and users can be confused when things don’t behave as they expect. For that reason I like to keep a partial
    opacity on the header so you can see the content scroll beneath the header and it is clear what's happening. Partial opacity also helps when you have 'in-page' links and the fixed header obscures the target. At least if the header is very slightly
    opaque you can see where the content started. </p>
  <p>Therefore use fixed headers with discretion and test thouroughly.</p>
  <p>Content to scroll ...</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content Last</p>
</div>
              
            
!

CSS

              
                html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,  Arial, sans-serif;
}
body {
  background: #eee;
}
.header {
  position: fixed; /*fallback*/
  position: -webkit-sticky; /* still needed for ios */
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 99;
  border: 1px solid #000;
  padding: 10px;
  background: rgba(100, 100, 100, 0.8);
  height: 120px; /* Need a fixed height for older browsers. this is removed in @supports rule below,( Don't use rem if you support ie10 and under)*/
  overflow: auto; /* Unfortunately have to have scrollbars in case content is zoomed or wrapped. This is never used in position sticky version as height is removed and the element will grow as required.*/
  color: #fff;
}
.header h1 {
  margin: 0;
  padding: 10px 0;
  text-align:center;
}
.header span {
  display: block;
  font-size: smaller;
  color:#ddd;
}
.wrap {
  padding: 20px;
  padding-top: 120px; /* preserve space for position:fixed header. This is removed for sticky headers in @supports rule below*/
  background: #f9f9f9;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  margin: auto;
  display: table; /* no margin collapse*/
  width: 100%; /* need width for display:table*/
  height: 100vh; /* height is treated as a minimum in display:table and will expand as required */
  max-width: 1280px; /* don't want it too big */
}

/* use @supports rule to remove magic numbers*/
@supports (position: sticky) or (position: -webkit-sticky) {
  .wrap {
    padding-top: 10px;
  }
  .header {
    height: auto;
  }
}

              
            
!

JS

              
                //nope
              
            
!
999px

Console