响应式CSS：修复了小屏幕中的左侧边栏和页脚冲突

Question

I need your help about this complex problem.

I have fixed header,left Sidebar and absolute sticky footer, and if the content height is smaller than browser's height, no scrolls are visible.

Html

<header></header>
<div class="container">
    <div class="aside-left">
        <p>sdfsdfs</p>
        <p>sdfsdfs</p>
        <p>sdfsdfs</p>
        <p>sdfsdfs</p>
        <p>sdfsdfs</p>
        <p>sdfsdfs</p>
        <p>sdfsdfs</p>
        <p>sdfsdfs</p>
        <p>sdfsdfs</p>
        <p>sdfsdfs</p>
        <p>sdfsdfs</p>
        <p>sdfsdfs</p>
    </div>
    <div class="container-mid"></div>
    <div class="push"></div>
    <footer></footer>
</div>

Css

html, body {
    height:100%;
    background:#ffaaaa;
    margin:0;
}
header {
    background: #2f3d4c;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 600;
    width: 100%;
    height: 75px;
}
.container {
    min-height:100%;
    position:relative;
}
.aside-left {
    background-color: rgba(255, 255, 255, 0.8);
    position: fixed;
    left: 0;
    top: 75px;
    min-height: 100%;
    width: 192px;
    overflow: hidden;
    z-index: 50;
}
.container-mid {
    margin-left: 192px;
    padding-top: 75px;
}
.push, footer {
    height: 55px;
}
footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    color: #ffffff;
    width: 100%;
    background: #2f3d4c;
    z-index: 100;
}
@media only screen and (max-height: 690px) {
    .aside--left {
        position: absolute;
        margin-bottom: -75px;
        float: left;
        margin-right: -100%;
    }
}

Everything is ok in large screens, but when screen height is smaller, and the content of Left Sidebar is higher than container height, footer is overlapping Left Sidebar's content and some part of it is not visible (See the fiddle).

I need this to work also in IE8+ and keep absolute position for left Sidebar when browser height is small, so that left sidebar will be strached from top to bottom (as I did in media query). Solution can include JS too, no matter.

Fiddle : http://jsfiddle.net/frontDev111/dqd2f2dt/1/

Answer 1

If I understood it right you're trying to achieve something like this.
I fixed the footer with position: fixed and added overflow: auto (to show scrollbars if needed since you hid them) as well as bottom: 55px (footer-height) to your left sidebar.

http://jsfiddle.net/dqd2f2dt/4/

(I filled it with testdata content to test how the content itself does its job)
I tested this with IE9 and it worked properly.