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.

            
              <header>
	<div class="container">
		<h1>Full height sidebar with jQuery</h1>
		<h4>Tutorial from <a href="https://andwecode.com">And We Code</a></h4>
	</div>
</header>
<!-- END Header -->

<div class="container">
	<main class="main-content col-xs-8">
		<h2>This is a main content</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores magnam neque doloribus eum totam repellendus libero reprehenderit unde minus reiciendis. Aspernatur esse id adipisci voluptates repellat laboriosam at quas alias!</p>

		<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor risus, dapibus
			rutrum ipsum gravida et. Integer lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim dignissim. Donec pretium est sit amet ipsum fringilla feugiat.
			Aliquam erat volutpat. Maecenas scelerisque, orci sit amet cursus tincidunt.</p>
		
		<p>This is just a quick demo. For Responsive layout and complete tutorial read my full article in my <a href="https://andwecode.com/full-height-sidebar-jquery">Blog</a>.</p>
	</main>
	<!-- END Main content -->

	<aside class="sidebar col-xs-4">
		<h4>Sidebar title</h4>
		<p>This is a sidebar</p>
	</aside>
	<!-- END Sidebar -->
</div>

<footer>
	<div class="container">
		<p>Thank you for reading this tutorial.</p>
	</div>
</footer>
<!-- END Footer -->
            
          
!
            
              body {
  background-color: #f4f4f4;
}

header {
  margin-bottom: 20px;
}

.main-content {
  background-color: #FFF;
}

.sidebar {
	color: #FFF;
  background-color: #0090d3;
}

footer {
  padding: 20px 0;
}
            
          
!
            
              $(window).load(sidebarHeight);
$(window).resize(sidebarHeight);

function sidebarHeight() {
	var containerHeight = $('.main-content').height();
	$('.sidebar').height(containerHeight);
}
            
          
!
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