CSS style does not render offscreen elements with styles - html

Question

I've having problems rending off screen elements properly. I believe the problem has to do with overflow properties. If I view the browser at full screen(1080p) its fine, but when I resize the browser to a smaller resolution, and then SCROLL down, the styles disappear for off screen elements.
EDIT [ Removed links to prevent broken links in the future ]
/* DEFAULT */
* {
margin: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
}
#font-face {
font-family: leela;
src: url('leelawad_0.ttf');
}
html, body {
height: 100%;
background-color: rgb(255,255,255);
}
h1 {
color: rgb(183,183,183);
font-family: leela;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
}
a {
color: rgb(102,102,102);
text-decoration: none;
}
/* ID */
#container {
height: 100%;
overflow-x: hidden;
width: 100%;
}
#header {
border: 1px solid rgb(153,153,153);
border-top: 0px;
background-color: rgb(255,255,255);
padding: 8px;
position: fixed;
width: 100%;
z-index: 3;
}
#quickSearch {
border: 1px solid rgb(153,153,153);
background-color: rgb(250,250,250);
height: 30px;
margin: 8px 8px 8px 8px;
}
#quickSearch input {
background-color: rgb(250,250,250);
border: 0px;
height: 28px;
margin-left: 10px;
margin-top: 0px;
float: left;
}
#naviContainer {
float: left;
width: 200px;
border-right: 1px solid rgb(153,153,153);
background-color: rgb(225,225,225);
height: 100%;
}
#navigation {
background-color: rgb(225,225,225);
float: left;
width: 200px;
margin-top: 31px;
position: relative;
z-index: 2;
height: 100%;
}
#navigation ul {
margin: 0px;
padding: 0px;
width: 200px;
}
#navigation li {
display: block;
list-style-type: none;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
#navigation li:hover {
background-color: rgb(173,173,173);
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
#navigation h1 {
border-bottom: 1px dotted rgb(153,153,153);
background-color: rgb(127,127,127);
padding: 8px;
}
#navigation h1.fix {
border-top: 1px dotted rgb(153,153,153);
}
#navigation ul li {
border-bottom : 1px dotted rgb(153,153,153);
}
#navigation li a {
display: block;
padding: 8px;
}
#contentContainer {
margin-left: 201px;
margin-top: 31px;
position: relative;
}
#breadcrumbs {
background-color: rgb(239,239,239);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(153,153,153);
padding: 8px;
position: inherit;
}
#breadcrumbs ul {
display: inline;
margin-left: 0px;
padding: 0px;
}
#breadcrumbs li {
display: inline;
}
#content {
padding: 8px;
position: inherit;
}
/* CLASSES */
.divider {
border-left: solid 1px rgb(102,102,102);
margin: 0px 7px 0px 5px;;
}
Any input would be greatly appreciated!

Answer 1

Try adding using position:fixed (I made it yellow so it would stand out):
#navigation {
background-color: yellow;
border-right: 1px solid #999999;
border-top: 0 none;
float: left;
height: 100%;
margin-top: 31px;
position: fixed;
width: 200px;
z-index: 2;
}
[Edit] 2nd attempt, remove height.
#navigation {
background-color: #E1E1E1;
float: left;
//height: 100%;
margin-top: 31px;
position: relative;
width: 200px;
z-index: 2;
}

Answer 2

that was nothing more then height:100% issue
Remove height:100% from #naviContainer will fix this.
#navigation {
background-color: #E1E1E1;
float: left;
min-height: 100%;
margin-top: 31px;
position: relative;
width: 200px;
z-index: 2;
}
#naviContainer {
background-color: #E1E1E1;
border-right: 1px solid #999999;
float: left;
min-height: 100%; /* the fix */
width: 200px;
}