layout

  • Header and Footer occupy space respectively
  • Fixed width is set on both sides and the middle width is adaptive

Implementation:

  1. floating
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; }
Copy the code
<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>
Copy the code

In particular, the adaptive Center section comes last.

  1. Flex layout
 .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; }Copy the code
 <header class="header"></header>
  <section class="section">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </section>
  <footer class="footer"></footer>
Copy the code

Set the adaptive Center flex:1; Can.

3. Absolute positioning on both sides positioning, middle margin:0 width;

 .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; }
Copy the code