karolk/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
/* these are just to set up environment, you don't need them */
html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}


/* actual customer panel CSS */

div {
  border: 1px solid gray;
  box-sizing: border-box;
}

#customer-panel {
  /* currently it's done with a float so let's keep this */
  float: right;
  width: 20%;
  height: 100%;
  position: relative;
}

.pane {
  position: absolute;
  top: 0;
  /* these will make them as wide as the customer panel */
  left: 0;
  right: 0;
}

#header {
  height: 100px;
}

#top-pane {
  top: 100px;
  bottom: 50%;
  overflow-y: auto;
}

#zendesk {
  top: 50%;
  bottom: 0;
  /* currently made the iframe 100 height so the iframe will take care of the scroll */
}

#zendesk iframe {
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
  <div id="customer-panel">
    <div id="header" class="pane">
      Header stuff
    </div>

    <div id="top-pane" class="pane">
      <p>content to scroll</p>
      <p>content to scroll</p>
      <p>content to scroll</p>
      <p>content to scroll</p>
      <p>content to scroll</p>
      <p>content to scroll</p>
      <p>content to scroll</p>
      <p>content to scroll</p>
      <p>content to scroll</p>
      <p>content to scroll</p>
      <p>content to scroll</p>
      <p>content to scroll</p>
    </div>

    <div id="zendesk" class="pane">
      <iframe src="https://www.conversocial.com"></iframe>
    </div>
  </div>


<script id="jsbin-source-css" type="text/css">/* these are just to set up environment, you don't need them */
html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}


/* actual customer panel CSS */

div {
  border: 1px solid gray;
  box-sizing: border-box;
}

#customer-panel {
  /* currently it's done with a float so let's keep this */
  float: right;
  width: 20%;
  height: 100%;
  position: relative;
}

.pane {
  position: absolute;
  top: 0;
  /* these will make them as wide as the customer panel */
  left: 0;
  right: 0;
}

#header {
  height: 100px;
}

#top-pane {
  top: 100px;
  bottom: 50%;
  overflow-y: auto;
}

#zendesk {
  top: 50%;
  bottom: 0;
  /* currently made the iframe 100 height so the iframe will take care of the scroll */
}

#zendesk iframe {
  width: 100%;
  height: 100%;
}</script>
</body>
</html>

## jsbin.buruwos.css
/* these are just to set up environment, you don't need them */
html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}


/* actual customer panel CSS */

div {
  border: 1px solid gray;
  box-sizing: border-box;
}

#customer-panel {
  /* currently it's done with a float so let's keep this */
  float: right;
  width: 20%;
  height: 100%;
  position: relative;
}

.pane {
  position: absolute;
  top: 0;
  /* these will make them as wide as the customer panel */
  left: 0;
  right: 0;
}

#header {
  height: 100px;
}

#top-pane {
  top: 100px;
  bottom: 50%;
  overflow-y: auto;
}

#zendesk {
  top: 50%;
  bottom: 0;
  /* currently made the iframe 100 height so the iframe will take care of the scroll */
}

#zendesk iframe {
  width: 100%;
  height: 100%;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	/* these are just to set up environment, you don't need them */
	html, body {
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
	}


	/* actual customer panel CSS */

	div {
	border: 1px solid gray;
	box-sizing: border-box;
	}

	#customer-panel {
	/* currently it's done with a float so let's keep this */
	float: right;
	width: 20%;
	height: 100%;
	position: relative;
	}

	.pane {
	position: absolute;
	top: 0;
	/* these will make them as wide as the customer panel */
	left: 0;
	right: 0;
	}

	#header {
	height: 100px;
	}

	#top-pane {
	top: 100px;
	bottom: 50%;
	overflow-y: auto;
	}

	#zendesk {
	top: 50%;
	bottom: 0;
	/* currently made the iframe 100 height so the iframe will take care of the scroll */
	}

	#zendesk iframe {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<div id="customer-panel">
	<div id="header" class="pane">
	Header stuff
	</div>

	<div id="top-pane" class="pane">
	<p>content to scroll</p>
	<p>content to scroll</p>
	<p>content to scroll</p>
	<p>content to scroll</p>
	<p>content to scroll</p>
	<p>content to scroll</p>
	<p>content to scroll</p>
	<p>content to scroll</p>
	<p>content to scroll</p>
	<p>content to scroll</p>
	<p>content to scroll</p>
	<p>content to scroll</p>
	</div>

	<div id="zendesk" class="pane">
	<iframe src="https://www.conversocial.com"></iframe>
	</div>
	</div>



	<script id="jsbin-source-css" type="text/css">/* these are just to set up environment, you don't need them */
	html, body {
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
	}


	/* actual customer panel CSS */

	div {
	border: 1px solid gray;
	box-sizing: border-box;
	}

	#customer-panel {
	/* currently it's done with a float so let's keep this */
	float: right;
	width: 20%;
	height: 100%;
	position: relative;
	}

	.pane {
	position: absolute;
	top: 0;
	/* these will make them as wide as the customer panel */
	left: 0;
	right: 0;
	}

	#header {
	height: 100px;
	}

	#top-pane {
	top: 100px;
	bottom: 50%;
	overflow-y: auto;
	}

	#zendesk {
	top: 50%;
	bottom: 0;
	/* currently made the iframe 100 height so the iframe will take care of the scroll */
	}

	#zendesk iframe {
	width: 100%;
	height: 100%;
	}</script>
	</body>
	</html>