sticky footer布局:当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布;当页面内容较多时,页脚能随着文档流自动撑开,显示在页面的最底部
使用flex布局实现
.wrapper { display: flex; flex-direction: column; overflow: auto; } .content { flex: 1; } .footer { flex: 0; }
2024-02-04 18:28:58
sticky footer布局:当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布;当页面内容较多时,页脚能随着文档流自动撑开,显示在页面的最底部
使用flex布局实现
.wrapper { display: flex; flex-direction: column; overflow: auto; } .content { flex: 1; } .footer { flex: 0; }