CSS 头脚+中间两列布局

Thu, 10 Oct 2019 11:46:44 +0000
效果图
<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>
Css on 编程技术记录

CSS 头脚+中间两列布局
