Complicated Layout

Based on JavaSpyder's Fiddle

by JavaSpyder

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="header">
  <button id="hide-panel">
    Toggle Left Panel
  </button>
  <button onclick="showTab(1)">
    Tab 1
  </button>
  <button onclick="showTab(2)">
    Tab 2
  </button>
  <button onclick="showTab(3)">
    Tab 3
  </button>
  <button onclick="showTab(4)">
    Tab 4
  </button>
  <button onclick="showTab(5)">
    Tab 5
  </button>
  <button onclick="showTab(6)">
    Tab 6
  </button>
</div>
<div id="wrapper">
  <div id="left">
    <div id="content">
      <p>
        Content content content content
      </p>
      <p>
        Content content content content
      </p>
      <p>
        Content content content content
      </p>
      <p>
        Content content content content
      </p>
      <p>
        Content content content content
      </p>
      <p>
        Content content content content
      </p>
      <p>
        Content content content content
      </p>
      <p>
        Content content content content
      </p>
      <p>
        Content content content content
      </p>
      <p>
        Content content content content
      </p>
    </div>
  </div>
  <div id="right">
    <div id="tabs">
      <div id="tab1" class="tab small tabVisible">
        Tab
      </div>
      <div id="tab2" class="tab tall">
        Tab
      </div>
      <div id="tab3" class="tab med">
        Tab
      </div>
      <div id="tab4" class="tab small">
        Tab
      </div>
      <div id="tab5" class="tab small">
        Tab
      </div>
      <div id="tab6" class="tab tall">
        Tab
      </div>
    </div>
    <div id="summary">
      <p>
        Summary
        <br>summary
        <br>summary
        <br>summary
      </p>
    </div>
  </div>

</div>
<div id="footer">

</div>

CSS

body {
  margin: 0;
}

p {
  margin: 0;
}

#header {
  position: fixed;
  height: 60px;
  width: 100%;
  background-color: #BFBFBF;
  z-index: 1;
}

#wrapper {
  display: flex;
  flex-direction: row;
  width:100%;
}

#left {
  box-sizing: border-box;
  width: 200px;
  flex-shrink: 0;
  background-color: #bbb;
}

#content {
  box-sizing: border-box;
  width: 200px;
  margin-top:60px;
  padding: 10px;
  background-color: #FFC000;
  position: fixed;
  overflow:auto;
}

#right {
  box-sizing: border-box;
  flex-grow:1;
}

#tabs {
  padding: 60px 0 0;
}

#summary {
  box-sizing: border-box;
  width: 100%;
  padding: 20px 20px 80px;
  background-color: #9BC1E6;
}

.tab {
  box-sizing:border-box;
  background-color: #92D14F;
  width:0;
  border-bottom:1px solid black;
  visibility: hidden;
  position:absolute;
}

.tabVisible {
  visibility: visible !important;
  position:initial;
  width:100%;
}

.small {
  padding: 10px;
}

.med {
  padding: 20px 10px;
}

.tall {
  padding: 30px 10px;
}

#footer {
  position: fixed;
  height: 60px;
  width: 100%;
  background-color: #BFBFBF;
  bottom: 0;
}

JavaScript

$(document).ready(function() {
	setContentHeight();
  $('#hide-panel').on('click', function() {
    if ($('#content').css('visibility') != 'hidden') {
      $('#content').css('visibility', 'hidden');
      $('#left').width('0');
    } else {
    	$('#content').css('visibility', 'visible');
      $('#left').width('200px');
    }
  });
});
function setContentHeight() {
	var height = $(window).height() - 120;
	$('#content').css('height', height+'px');
}
$(window).resize(function(){
	setContentHeight();
});

showTab = function(visTab) { /* yes I know this is a bit rough but it shows the behaviour I have */
  for (i=1; i<=6; i++)
  {
    if (i == visTab)
      $('#tab' + i).addClass( "tabVisible" );
    else
      if ($('#tab' + i).hasClass( "tabVisible" ))
        $('#tab' + i).removeClass( "tabVisible" );
  }
}