I am currently developing a fresh website design. I envision a layout with the header positioned at the top, content in the middle, and a footer that will either stay at the bottom of the window if the content is minimal, or go to the bottom of the content if it's longer.
In addition, there will be a sidebar on the left side that should occupy the space between the header and footer, expanding as needed when the content grows.
While this arrangement works perfectly in Google Chrome, Internet Explorer presents an issue where the side navigation only occupies the space it currently uses rather than filling the entire vertical area between the header and footer.
You can view the problem by opening this link in Chrome: http://jsfiddle.net/ama4tyz2/embedded/result/.
Below is the CSS code for my sidebar container, which I suspect is causing the problem. It seems like Internet Explorer is not acknowledging the min-height property.
nav.sideNav
{
position: absolute;
float: left;
width: 200px;
height: auto;
min-height: -moz-calc(100% - 160px);
min-height: -webkit-calc(100% - 160px);
min-height: -khtml-calc(100% - 160px);
min-height: -o-calc(100% - 160px);
min-height: -ms-calc(100% - 160px);
padding-bottom: 80px;
background-color: purple;
}