CSS – 编程技术记录 https://blog.z6z8.cn 世界你好! Thu, 10 Oct 2019 11:46:44 +0000 zh-Hans hourly 1 https://wordpress.org/?v=6.8.3 CSS 头脚+中间两列布局 https://blog.z6z8.cn/2019/10/10/css-%e5%a4%b4%e8%84%9a%e4%b8%ad%e9%97%b4%e4%b8%a4%e5%88%97%e5%b8%83%e5%b1%80/ Thu, 10 Oct 2019 11:46:44 +0000 http://blog.z6z8.cn/?p=478 效果图

<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>
]]>