cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              <html>
<head>
  <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"
  rel="stylesheet">
</head>
<body>
  <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>
    <div id="main-content"><!-- main app content --></div>
  </div>
  <script src="js/dummy_text.js"></script>
</body>
</html>
            
          
!
            
              /* 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
http://www.paulirish.com/2012/box-sizing-border-box-ftw/; 
*/

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
  https://www.w3schools.com/css/css_max-width.asp
  */
  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;
  left:0;
  right: 0;
  z-index:10;

  /* 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;
  align-items:center;

  /* 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
}

var
  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')
;
  
placeholder.appendChild(fakeTextBlock);
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console