How to get equal height for all sections? - html

Question

I have some questions:
How can I get the nav, conversationList and conversation section expand to the bottom?
If one of these 3 expand their size (e.g. a long text). How can I apply the same size to all 3?
Fiddle Link.
HTML
<header>
Text
</header>
<main>
<nav>
Navigation
</nav>
<section id="contentWrapper">
<section id="contentTitle">
TITLE
</section>
<section id="conversationList">
List
</section>
<section id="conversation">
Conversation
</section>
</section>
</main>
CSS
html, body{
height: 100%;
width: 100%;
margin:0px !important;
}
header{
position: fixed;
top: 0;
height: 60px;
width: 100%;
background-color: #777;
z-index: 1;
}
main{
float: left;
padding-top: 60px;
background-color:black;
bottom:0px;
width:100%;
min-height: calc(100% - 60px);
}
nav{
float: left;
width: 15%;
min-height: 100%;
background-color: green;
}
#contentTitle{
float: left;
width: 98.5%;
height: 35px;;
padding-top: 25px;
padding-left: 1.5%;
background-color: red;
}
#contentWrapper{
float: left;
width: 85%;
min-height: 100%;
}
#pageTitle{
float: left;
width: 100%;
height: 40px;
padding-top: 20px;
padding-left: 3%;
background-color: red;
}
#conversationList{
float: left;
width: 30%;
background-color: white;
}
#conversation{
float: left;
width: 70%;
background-color: yellow;
}

Answer 1

Basic answer is to apply height: 100% to every element you want stretched. You have to remember to give each parent element a height of 100% as well, like #contentWrapper needs height: 100%.
Have a fiddle!
I have completely re-written this for you:
jsBin example!
Have a play with it so that you understand how it works.
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
height: 100%;
}
header {
height: 60px;
background: green;
}
main {
display: table;
width: 100%;
height: calc(100% - 60px);
}
nav {
display: table-cell;
width: 60px;
background: green;
}
#contentWrapper {
display: table;
width: 100%;
height: calc(100% - 60px);
}
#contentTitle {
width: 100%;
height: 60px;
background: red;
}
#conversationList {
width: 80px;
float: left;
height: calc(100% - 60px);
background: yellow;
}
#conversation {
float: left;
width: calc(100% - 80px);
height: calc(100% - 60px);
background: pink;
}
HTML
<header>
Text
</header>
<main>
<nav>
Navigation
</nav>
<section id="contentTitle">
TITLE
</section>
<section id="conversationList">
List
</section>
<section id="conversation">
Conversation
</section>
</main>