/* -------------------------------------------------------------------------------------------- */
/* Sticky footer styles
-------------------------------------------------- */



/* 以下一组样式，让底部内容，随内容自然流到页面底部（内容不足时在视口底部，内容过长时在页面最下方）*/
html, body {
    height: 100%; /* 让 html 和 body 占满整个视口高度 */
}

/* 父容器使用 flex 布局 */
.page-container {
    min-height: 100%; /* 最小高度为视口高度 */
    display: flex;
    flex-direction: column; /* 垂直排列子元素 */
    padding-top: 60px;
}



/* 内层容器：包裹主要内容和新增底部 div */
.pagecontent-and-pagefooter {
    flex: 1; /* 占据外层容器剩余空间，将全局 footer 推到最底部 */
    display: flex;
    flex-direction: column; /* 垂直排列 */
}

/* 中间内容区域自动占满剩余空间 */
.content-main {
    flex: 1; /* 占据剩余空间，将底部 div 推到最下方 */
}

/* 页面的 footer div：随内容流动，位于主要内容下方、全局 footer 上方 */
.pager-footer {
}

/* 系统级全局 footer：始终在页面最底部 */
.global-footer {
    padding: 10px;
    background: #f5f5f5;
    color: white;
    height: 60px;
}