三种常用方式实现后台管理系统自适应布局

后台管理系统基本都是下图的变体，先上图

下面说说布局实现方式，同一套html如下

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>自适应布局</title><link rel="stylesheet" href="./index.css"></head><body><div class="header">header</div><div class="container"><div class="menu">menu</div><div class="container-in">container</div></div><div class="footer">footer</div></body></html>

第一种方式，FLEX布局,FLEX MDN 网址：FLEX MDN

* {margin: 0;padding: 0;}html, body {width: 100%;height: 100%;display: flex;flex-direction: column;}.header {width: 100%;height: 60px;background: red;}.footer {width: 100%;height: 30px;background: blue;}.container {width: 100%;flex: 1;display: flex;}.menu {width: 60px;height: 100%;background: green;}.container-in {float: left;flex: 1;background: yellow;}

第二种方式，CALC计算属性, CALC MDN 网址： CALC MDN

* {margin: 0;padding: 0;}html, body {width: 100%;height: 100%;}.header {width: 100%;height: 60px;background: red;}.footer {width: 100%;height: 30px;background: blue;}.container {width: 100%;height: calc(100% - 90px);}.menu {float: left;width: 60px;height: 100%;background: green;}.container-in {float: left;width: calc(100% - 60px);height: 100%;background: yellow;}

第三种，BFC方式, BFC MDN简介:BFC MDN

* {margin: 0;padding: 0;}html, body {width: 100%;height: 100%;}.header {width: 100%;height: 60px;background: red;}.footer {width: 100%;height: 30px;background: blue;}.container {width: 100%;height: calc(100% - 90px);}.menu {float: left;width: 60px;height: 100%;background: green;}.container-in {overflow: hidden;background: yellow;}

{{item.like > 0 ? item.like : '点赞'}} {{item.comment_content_show ? '取消' : '回复'}} 删除

回帖

{{reply.like > 0 ? reply.like : '点赞'}} {{reply.comment_content_show ? '取消' : '回复'}} 删除

收起