使用CSS固定页面顶部三个元素并实现响应式布局

针对你需要固定的三个元素（.page-header、导航栏所在的.col-md-12、表格<thead>），以下是兼顾固定效果和响应式的实现方案：

一、修复前两个顶部元素的响应式问题 #

原代码使用固定left和width导致无法适配不同屏幕，改用相对父容器的布局+媒体查询来适配：

1. CSS 修改 #

/* 定义全局变量，方便统一调整尺寸 */
:root {
    --sidebar-width: 290px;
    --header-height: 35px;
    --nav-height: 50px;
}

/* 基础固定样式，适配有侧边栏的情况 */
#prayer_time .page-header {
    position: fixed;
    top: 40px;
    left: var(--sidebar-width);
    right: 0;
    z-index: 99;
    background: #fff; /* 加背景色避免被下方内容穿透 */
    height: var(--header-height);
}

#prayer_time .col-md-12 {
    position: fixed;
    top: calc(40px + var(--header-height)); /* 基于头部高度动态计算top值 */
    left: var(--sidebar-width);
    right: 0;
    z-index: 98;
    padding-right: 0;
    padding-left: 0;
    background: #fff;
}

/* 给表格区域添加上部内边距，避免被固定元素遮挡 */
#prayer_time .row.gx-2.gx-lg-3 {
    padding-top: calc(40px + var(--header-height) + var(--nav-height));
}

/* 响应式适配：侧边栏收起时（移动端/小屏幕） */
@media (max-width: 991px) {
    :root {
        --sidebar-width: 0px;
    }
    #prayer_time .page-header,
    #prayer_time .col-md-12 {
        left: 0;
    }
}

2. HTML 补充优化（可选） #

给导航栏卡片添加明确高度，确保calc计算的位置准确：

<div class="col-md-12">
    <div class="card" style="height: var(--nav-height);">
        <!-- 导航内容 -->
    </div>
</div>

二、固定表格<thead> #

使用position: sticky实现表头固定，同时适配前面两个固定元素的高度：

CSS 添加 #

#columnSearchDatatable thead tr th {
    position: sticky;
    top: calc(40px + var(--header-height) + var(--nav-height)); /* 表头固定在导航栏下方 */
    z-index: 97;
    background: #f8f9fa; /* 表头背景色，避免被表格内容穿透 */
}

/* 表格容器设置滚动限制，确保表头固定生效 */
.datatable-custom {
    max-height: calc(100vh - (40px + var(--header-height) + var(--nav-height) + 40px)); /* 计算容器最大高度，留出底部留白 */
    overflow-y: auto;
}

核心优化点 #

• 用CSS变量替换硬编码数值，后续调整尺寸只需修改变量
• 媒体查询适配侧边栏收起状态，保证小屏幕下布局正常
• position: sticky实现表头固定，比fixed更贴合表格的响应式需求
• 通过calc()动态计算位置和高度，避免固定数值导致的布局错乱

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