// 利用绝对定位实现 body { padding: 0; margin: 0; } .header { position: absolute; top: 0; width: 100%; height: 100px; background: red; } .container { position: absolute; top: 100px; bottom: 100px; width: 100%; background: green; } .footer { position: absolute; bottom: 0; height: 100px; width: 100%; background: red; } // 利用flex布局实现html, body { height: 100%; } body { display: flex; padding: 0; margin: 0; flex-direction: column; } .header { height: 100px; background: red; } .container { flex-grow: 1; background: green; } .footer { height: 100px; background: red; }
详细资料可以参考: 《css 实现上下固定中间自适应布局》
本文作者:前端小毛
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!