Check out my design at https://jsfiddle.net/49hsztuh/
Take a look at the code snippet below:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style>
@charset "utf-8";
html,body {
height:100%;
width:100%;
}
.chatContainer {
font-family:Nunito;
font-size:0.9em;
background-color:red;
height:800px;
}
.chatHeader {
height:50px;
background-color:#363b3f;
color:white;
padding-left:10px;
}
#myWebcamDiv {
height:260px;
width:100%;
background-color:black;
padding:0px;
}
#chatUsers {
margin-top:10px;
overflow-y:scroll;
overflow-x:hidden;
width:100%;
height:320px;
background-color:blue;
}
#chatCams {
width:100%;
background-color:#FeFeFe;
padding:0px;
display:inline-block;
overflow-y:hidden;
overflow-x:auto;
white-space: nowrap;
}
.chatText {
height:250px;
padding:10px;
background-color:yellow;
color:black;
overflow-x:none;
overflow-y:scroll;
}
</style>
</head>
<div class="col-md-12 chatContainer">
<div class="chatHeader"></div>
<div class="col-md-4" id="chatLeftColumn" >
<div id="myWebcamDiv"></div>
<div id="chatUsers"></div>
</div>
<div class="col-md-8" id="chatRightColumn">
<div id="chatCams"></div>
<div role="tabpanel">
<!-- Nav tabs -->
<ul id="pageTab" class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#LoungeRoom" role="tab" data-toggle="tab">LoungeRoom</a></li></ul>
<!-- Tab panes -->
<div id="pageTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane active chatText" id="LoungeRoom"></div>
<div class="tab-pane chatText" id="LoungeRoom"></div>
</div>
</div>
<div id="chatInputDiv"></div>
</div>
</div>
I'm looking to extend the blue and yellow sections all the way down to the bottom of the red container. (make sure you view the fiddle with a min width).
Any suggestions on how to achieve this?