table实现圣杯模式

html

  <div class="test-wrapper">
    <div class="header">圣杯模式</div>
    <div class="main">
      <div class="siderbar">侧边栏</div>
      <div class="content">正文内容</div>
      <div class="siderbar">侧边栏</div>
    </div>
    <div class="footer">底部</div>
  </div>

less

.test-wrapper {
  display: table;
  text-align: center;

  .header {
    display: table-row;
    height: .5rem; //10px
    background: yellow;
  }

  .main {
    width: 100%;
    height: 100%;
    display: table;

    .siderbar {
      width: 5rem; //100px
      background: orange;
    }

    div {
      display: table-cell;
    }
  }

  .footer {
    display: table-row;
    height: .5rem;
    background: green;
    color: beige;
  }
}

结果展示

image.png

原文地址：https://www.html.cn/archives/6308