I have 3 divs inside a parent div, intended to be arranged like so:
______________________________________
| |
| HEADER |
|______________________________________|
____ _______________________________
| | | |
| | | |
| | | |
| | | |
| N | | |
| A | | CONTENT |
| V | | |
| - | | |
| B | | |
| A | | |
| R | | |
| | | |
| | | |
|____| |_______________________________|
The #header has a fixed height and is working properly.
However, the content inside the #content div is dynamic based on the loaded page. I am trying to make the #nav-bar match the height of #content at all times, but I haven't been successful in doing so.
I want both #content and #nav-bar to have a min-height of 100% of the screen height (taking up the full height of the screen at minimum), and when #content grows beyond that, I want #nav-bar to grow accordingly.
I have managed to make #nav-bar's height grow, but it's not matching exactly with #content, resulting in mismatched heights.
Here is the relevant code snippet:
HTML:
<div id='container'>
<div id='center-panel'>
<div id='top-banner'></div>
<div id='nav-bar'>
<?php
echo get_nav_list();
?>
</div>
<div id='header'><span id='fact-tag'>current points leader</span><span id='fact-value'>4</span></div>
<div id='content'>Lorem ipsum...
</div>
</div>
</div>
CSS:
html, body {
background-color: #ccc;
min-height: 100%;
margin: auto;
font-family: 'Noto Sans', 'Tahoma', sans-serif;
font-size: 12pt;
color: #666;
}
#container {
height: 100%;
overflow: scroll;
}
#center-panel {
margin-left: auto;
margin-right: auto;
width: 800px;
background-color: #fff;
min-height: 100%;
}
#header {
height: 33px;
max-height: 33px;
text-align: right;
color: #aaa;
padding: 0px 15px 0px 160px;
font-size: 18pt;
border: 2px dashed blue;
}
#header span#fact-tag {
font-weight: 700;
}
#header span#fact-value {
display: inline-block;
min-width: 40px;
background-color: #ccc;
margin-left: 10px;
color: #444;
padding: 0px 3px 0px 3px;
}
#nav-bar {
float: left;
width: 110px;
text-align: center;
height: inherit;
font-family: 'Oxygen', 'Tahoma', sans-serif;
padding: 33px 0px 0px 0px;
border: 2px dashed red;
}
#nav-bar ul {
list-style-type: none;
text-align: left;
font-size: 10pt;
padding: 0px;
margin: 0px;
}
#nav-bar > ul > li {
min-height: 35px;
background-color: #444;
color: #ccc;
border-left: 6px solid #444;
border-bottom: 3px solid #666;
cursor: pointer;
}
#content {
padding: 60px 45px 30px 160px;
border: 2px dashed green;
}
Javascript:
$('#nav-bar ul li').on('click', function() {
$(this).css('border-left-color', '#ad9557').siblings().css('border-left-color', '#666');
$(this).children().slideDown('fast');
$(this).siblings().children('ul').slideUp('fast');
});
$('#nav-bar').css('height', $('#container').height());