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

Responsive Css: Fixed Left Sidebar and Footer conflict in small screens

本文关键字：侧边栏 冲突 屏幕 CSS 响应      更新时间：2023-09-26

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

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

目录

<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/

如果我

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

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

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

相关文章：