Complicated Layout

by JavaSpyder

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="header">
  <button id="hide-panel">
    Toggle Left Panel
  </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 class="tab small">
        Tab
      </div>
      <div class="tab tall">
        Tab
      </div>
      <div class="tab med">
        Tab
      </div>
      <div class="tab small">
        Tab
      </div>
      <div class="tab small">
        Tab
      </div>
      <div 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;
}

#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;
  width: 100%;
}

#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:100%;
  border-bottom:1px solid black;
}

.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();
});