三栏布局布局要求 header和footer各自占领空间两侧设置固定的宽度，中间宽度自适应实现：浮动特别的，自适

布局要求

header和footer各自占领空间
两侧设置固定的宽度，中间宽度自适应

1622536080(1).png

实现：

浮动

css:
body {width: 100%;}
.header, .footer { height: 100px;background: #ddd; }
.section { height: 300px; }
.left {width: 100px; height: 100%;float: left;background-color: red;}
.right {width: 100px;height: 100%;float: right;background-color: yellow;}
.center { height: 100%; margin: 0 100px;background-color: orange; }

<body>
  <header class="header"></header>
  <section class="section">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
  </section>
  <footer class="footer"></footer>
</body>

特别的，自适应的center部分要放在最后。

flex 布局

 .section { height: 300px; display: flex;}
    .left { width: 100px;height: 100%;background-color: red; }
    .right {width: 100px;height: 100%;background-color: yellow;}
    .center {height: 100%;flex: 1;background-color: orange;}

 <header class="header"></header>
  <section class="section">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </section>
  <footer class="footer"></footer>

将自适应的center 设置flex:1;即可。

3.绝对定位两边定位，中间margin:0 宽度；

 .left {width: 100px;height: 100%;background-color: red;position: absolute;left: 0; top: 0; }
 .right {position: absolute;right: 0; top: 0; width: 100px;height: 100%;background: yellow;}
 .center { height: 100%;margin: 0 100px background-color: orange; }