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 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 class="area-one">  
  <h2 class="header">Conteúdo com altura máxima</h2>  
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit nam unde consequuntur id totam ducimus, numquam tenetur, est, aliquid voluptates minus itaque facilis. Magnam, voluptatibus quo. Nesciunt sit sed, quam quisquam nam explicabo necessitatibus saepe, amet deserunt dolores quos repudiandae eos. Impedit autem, at animi praesentium laudantium dolores distinctio, dolorem. Sed inventore maiores magni laudantium rerum itaque quasi placeat adipisci amet, neque alias asperiores tempore, voluptas officia ullam accusamus nemo omnis molestiae aliquam. Iure ea quam magni saepe repellat ad sint earum eius aliquid iste perspiciatis, fugit porro natus adipisci architecto quia harum, eveniet expedita labore repudiandae corporis. Error in, sed aspernatur tempora saepe mollitia, adipisci esse. Aperiam ullam laudantium itaque odit, sequi fuga nostrum corporis fugit nulla accusamus incidunt, adipisci quas alias fugiat quis cumque, aliquid. Adipisci maiores iusto aspernatur earum enim obcaecati ipsum dignissimos, est aliquam ducimus. Atque rem commodi qui ipsum obcaecati illum molestiae quas ratione est nostrum animi eveniet, sit ullam tenetur culpa veniam ea aspernatur hic. Ex unde rerum repellat, labore maxime dolor provident aspernatur. Quaerat fugiat, omnis tempora tenetur animi debitis a eveniet dolorem. Maiores fugiat perspiciatis nisi, dicta, aut rerum nemo eligendi. Obcaecati, tempore, perspiciatis. Nostrum ex, totam cumque, natus vitae cum illo accusamus veritatis nemo illum tempore iure unde, hic aliquam velit non saepe. Nam nobis mollitia architecto aspernatur ex animi, perferendis ratione nihil, officia placeat quaerat, voluptatum vitae, enim autem quia in maiores inventore veniam explicabo dicta quas iure neque. Consectetur explicabo eligendi, reprehenderit minima autem maxime aperiam sunt ut doloribus molestiae ullam repellendus praesentium velit? Illo facilis recusandae maiores, cupiditate molestiae laboriosam labore ut rerum alias, tempora, culpa commodi. Voluptate quos optio doloremque perferendis quia officia libero ratione expedita nemo ut minus veniam porro culpa ex nesciunt, distinctio ducimus sint blanditiis hic quibusdam esse! Laboriosam eveniet ducimus quidem quas quisquam.  officia placeat quaerat, voluptatum vitae, enim autem quia in maiores inventore veniam explicabo dicta quas iure neque. Consectetur explicabo eligendi, reprehenderit minima autem maxime aperiam sunt ut doloribus molestiae ullam repellendus praesentium velit? Illo facilis recusandae maiores, cupiditate molestiae laboriosam labore ut rerum alias, tempora, culpa commodi. Voluptate quos optio doloremque perferendis quia officia libero ratione expedita nemo ut minus veniam porro culpa ex nesciunt, distinctio ducimus sint blanditiis hic quibusdam esse! Laboriosam eveniet ducimus quidem quas quisquam.</p>  
  </div>
</div>
              
            
!

CSS

              
                .area-one {
  width: 100%;
  float: left;
  height: 100%;
  margin-right: 1em;
}
.header {
  background: #006abd;
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  color: white;
  margin: 0;
}

.content {
  padding: 15px;
  height: calc(100% - 50px); /* altura máxima menos o tamanho do header */
  overflow: auto;
  background: #74b8ed;
}

.content p {
  margin: 0 0 1em 0;
}

html, body {
  height: 100%;
  background: #ccc;
  padding: 20px;
}

body {
  padding: 20px;
  background: white;
}

* {
  box-sizing: border-box;
}
              
            
!

JS

              
                
              
            
!
999px

Console