Question

我需要你对这个复杂问题的帮助。

我有固定的标题，左侧边栏和绝对粘性页脚，如果内容高度小于浏览器的高度，则不会显示任何滚动。

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

大屏幕上的一切都很好，但是当屏幕高度较小，并且左侧边栏的内容高于容器高度时，页脚与左侧边栏的内容重叠，并且部分内容不可见（请参阅小提琴）。

我还需要在IE8 +中使用它，并在浏览器高度较小时保持左侧边栏的绝对位置，这样左侧边栏将从上到下（就像我在媒体查询中所做的那样）。解决方案也可以包括JS，无论如何。

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

Answer 1

如果我理解得对，你就是在努力实现这样的目标我使用position: fixed修复了页脚，并添加了overflow: auto（如果需要，则显示滚动条，因为你隐藏它们）以及bottom: 55px（页脚高度）到左侧边栏。

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

（我用testdata内容填充它以测试内容本身如何完成其工作）
我用IE9对它进行了测试，它运行正常。

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

1 个答案: