CSS 头脚+中间两列布局
效果图 <html> <head> <style type="text/css"> /* 整体Body */ .flex-body { width: 100%; height: 100%; margin: 0px; } /* 头 高70px*/ .flex-header { background-color: aqua; height: 70px; width: 100%; } /* 中间左侧，绝对定位，宽度50%，高度由top和bottom决定， top和bottom分别是 flex-header ，flex-footer的高度*/ .flex-left-main { position: absolute; background-color: red; width: 50%; top: 70px; bottom: 60px; } /* 中间左侧，绝对定位，宽度50%，高度由top和bottom决定， margin-left: 50% top和bottom分别是 flex-header ，flex-footer的高度*/ .flex-right-main { position: absolute; background-color: blue; width: 50%; top: 70px; bottom: 60px; margin-left: 50%; } /* 脚 高60px */ .flex-footer { position: absolute; bottom: 0px; width:100%; height: 60px; background-color: bisque; } </style> </head> <body class="flex-body"> <div id="flex-header" class="flex-header"></div> <div id="flex-left-main" class="flex-left-main"></div> <div id="flex-right-main" class="flex-right-main"></div> <div id="flex-footer" class="flex-footer"></div> </body> </html>