要实现如图的布局,我最先想到是将header与footer绝对定位,但是发现在移动端会出现bug,经查资料发现用absolute实现整体布局非常好,还挺简单的。
.header, .footer, .content { position: absolute; left: 0; right: 0; } .header { height: 48px; top: 0; z-index: 1; /*other style*/ } .footer { height: 52px; bottom: 0; z-index: 1; /*other style*/ } .content { top: 48px; bottom: 53px; overflow: auto; /*other style*/ }