cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

Code Indentation


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.

  <title>Full screen layout demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  <div id="app-container">
    <div id="app-header">
      <i class="material-icons">menu</i>
      <h1>Page Title</h1>
      <i class="material-icons">add</i>
    <div id="main-content"><!-- main app content --></div>
  <script src="js/dummy_text.js"></script>
              /* In your own code, first, import the normalize stylesheet. https://necolas.github.io/normalize.css/  
Codepen is doing it here for us.

/* apply a natural box layout model to all elements, but allowing components to change

html,body {
  box-sizing: border-box;
*, *:before, *:after { box-sizing: inherit; }

/* Set full height: http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height */
html {
  /* body will set it's height based on its parent, which is html */
  height: 100%;

  /* set full width as well */
  width: 100%;
body {
  /* min-height is needed for pages that might scroll, ie they may contain _more_ than 100% of viewport height */
  min-height: 100%;

  /* needed to prevent unwanted scroll-bars */
  margin: 0;
  padding: 0;
  /* This is just so we can tell the body block apart from the app container */
  background-color: gray;

/* Full height centered app container */
#app-container {

  /* Set block height using the viewport height unit, and force it to be full height, even if the containing content does not require it */
  min-height: 100vh;

  /* center this block for larger viewports */
  margin: 0 auto;

  /*Use max-width for better browser handling of small windows
  max-width: 31.25em;

  /* Use min-width to prevent your design from being scrunched up in tiny viewports (and instead be replaced with horizontal scroll bars) 
  min-width: 18.75em;
  /* Add padding around your content - this is just an arbitrary number */
  padding: 1em;

  /* Add sufficient top padding so the fixed header doesn't cover up main content by defailt.  This value should be a calculated value (eg using calc(), sass, etc):
  padding for this container + height of app header; Here, that is 1em + 4em */ 
  padding-top: 5em;

  /* just used to so we can tell the content block apart from the body block */
  background-color: white;

#app-header {
  /* fix the header to the top of the viewport. */
  position: fixed;
  top: 0;
  right: 0;

  /* this should match the min-width in app-container. Recommend setting using a common variable (eg with Sass) */
  min-width: 300px;

  /* just arbitrary values */
  height: 4em;
  padding: 1em;

  /* internal layout, centered vertically - flex layout is great for this */
  display: flex;
  flex-flow: row nowrap;

  /* just so we can tell the header apart */
  background-color: blue;
  color: white;

#app-header h1 {
  /* set the h1 block as the main flex block - it will fill all unused space in the block */
  flex: 1;

  /* center content inside the block */
  text-align: center;
              function generateTextBlock(str, qty){
	do {
   str += str
   qty -= 1
  } while (qty > 0)
	return str

  text = "Ac nisi hac ridiculus suspendisse condimentum condimentum ornare fusce eu non ligula massa parturient condimentum magnis hendrerit scelerisque class purus a libero libero adipiscing dignissim volutpat et. Imperdiet fermentum turpis platea rutrum varius id proin dis sociosqu dui posuere a mus hac cubilia ultricies orci id a adipiscing sit. A eros ipsum vestibulum rhoncus scelerisque orci adipiscing nec vestibulum duis justo morbi mi malesuada etiam eleifend sodales mattis facilisis urna consectetur vel elementum aptent luctus. Iaculis adipiscing et adipiscing quam suspendisse sem est condimentum a lectus vulputate rutrum leo condimentum morbi suspendisse lacus a eleifend parturient suspendisse erat.",
  fakeTextBlock = document.createTextNode(generateTextBlock(text, 10)),
  placeholder = document.getElementById('main-content')
Loading ..................