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

关于这个复杂的问题，我需要您的帮助。

我有固定的页眉，左侧边栏和绝对粘页脚，并且如果内容高度小于浏览器的高度，则看不到滚动。

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%;
    }
}

在大屏幕上，一切正常，但是当屏幕高度较小且Left Sidebar的内容高于容器高度时，页脚与Left Sidebar的内容重叠且部分内容不可见（请参见小提琴）。

我需要它在IE8 +中也能正常工作，并在浏览器高度较小时保持左侧边栏的绝对位置，以使左侧边栏从上到下被分开（就像我在媒体查询中所做的那样）。
解决方案也可以包括JS。

小提琴：http://jsfiddle.net/frontDev111/dqd2f2dt/1/

最佳答案

如果我理解正确，那么您正在尝试实现这样的目标。
我用position: fixed固定了页脚，并在左侧边栏添加了overflow: auto（以显示滚动条，因为您隐藏了它们），并且还添加了bottom: 55px（页脚高度）。

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

（我在其中填充了testdata内容，以测试内容本身的工作方式）
我用IE9进行了测试，它工作正常。