CSS固定页脚仅按钮区域覆盖 其余区域内容可见可点击

问题核心原因 #

当前整块150px高的.footer为绝对定位元素，即便没有设置不透明背景，整个矩形区域默认会拦截所有鼠标事件，导致下层.main区域被覆盖的部分无法点击。同时原代码存在属性拼写错误：多处将height写为heigth，且直接在标签上写宽高属性不利于维护。

实现思路 #

• 给整个页脚容器开启鼠标事件穿透，让非按钮区域的点击、hover事件直接透传到下层主内容区
• 仅给页脚内的实际按钮元素恢复鼠标事件响应，保证按钮可正常点击
• 给主内容区增加底部内边距，避免内容被半露出的按钮完全遮挡

完整调整代码 #

HTML部分 #

移除原标签上写错的heigth属性和冗余内联样式，给按钮添加语义化类名方便控制，同时修正SVG尺寸避免溢出：

<div class="footer">
    <div class="footer-btn-group">
        <span class="footer-btn footer-btn--left">
            <svg id="footer-back" height="100" width="100">
                <use xlink:href="#footerb"/>
            </svg>
        </span>
        <span class="footer-btn footer-btn--right">
            <svg id="footer-abort" height="100" width="100">
                <use xlink:href="#footera"/>
            </svg>
        </span>
    </div>
</div>

CSS部分 #

原有头部、主内容区基础样式可保留，重点补充页脚穿透逻辑和按钮样式：

.header {
    background: #fff;
    border-radius: 0;
    height: 120px;
    position: absolute;
    top: 60px;
    width: 100%;
}

.main {
    position: absolute;
    top: 180px;
    width: 100%;
    /* 去掉写死的150px高度，用最小高度适配内容，加底部内边距避开半露的按钮 */
    min-height: calc(100vh - 180px - 50px);
    padding-bottom: 50px;
}

.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 150px;
    width: 100%;
    color: red;
    /* 核心属性：整个页脚容器不拦截鼠标事件，事件穿透到下层主内容 */
    pointer-events: none;
}

.footer-btn-group {
    position: relative;
    width: 100%;
    height: 100%;
}

.footer-btn {
    position: absolute;
    bottom: 0;
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    /* 核心属性：按钮本身恢复鼠标事件响应，可正常点击 */
    pointer-events: auto;
    cursor: pointer;
}

.footer-btn--left {
    left: 20px;
    padding-left: 20px;
    justify-content: flex-start;
}

.footer-btn--right {
    right: 40px;
    padding-right: 40px;
    justify-content: flex-end;
}

效果说明 #

• 页脚除两个按钮外的所有空白区域完全透明，主内容在该区域可正常显示、点击
• 两个按钮固定在底部左右两侧，高度100px，刚好有50px高度叠加在主内容区，实现半遮挡效果且全程可点击
• 主内容区底部预留了50px内边距，不会出现内容被按钮完全挡住无法查看的问题

内容的提问来源于stack exchange，提问作者576i