css 上中下三行布局 4种方式

最新推荐文章于 2024-04-11 09:57:49 发布

前端卡卡西呀

最新推荐文章于 2024-04-11 09:57:49 发布

阅读量3.6k

点赞数 5

分类专栏：前端面试 CSS HTML 文章标签： css html5

本文链接：https://blog.csdn.net/RedaTao/article/details/106878832

版权

前端面试同时被 3 个专栏收录

43 篇文章 11 订阅

订阅专栏

CSS

12 篇文章 1 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

css 上中下三行布局，上下高度固定，中间自动填充满整个屏幕的 4种方式

如下图

另，左中右三列布局点这里

1.absolute实现

 <section class="top-bottom absolute">
    <style>
      html,
      body,
      .absolute,
      article {
        height: 100%;
        overflow: hidden;
      }

      .absolute div {
        width: 100%;
      }

      .absolute .top {
        position: absolute;
        top: 0;
        height: 100px;
        background: red;
      }

      .absolute .middle {
        position: absolute;
        top: 100px;
        bottom: 100px;
        height: 100%;
        background: #0ff;
      }

      .absolute .bottom {
        position: absolute;
        bottom: 0;
        height: 100px;
        background: yellow;
      }
    </style>
    <article>
      <div class="top"></div>
      <div class="middle">上下固定，中间自适应 absolute实现</div>
      <div class="bottom"></div>
    </article>
  </section>

2. flex实现

<section class="top-bottom flex">
    <style>
      html,
      body,
      .flex,
      article {
        height: 100%;
      }

      .flex article {
        display: flex;
        flex-direction: column;
      }

      .flex .top {
        height: 100px;
        background: red;
      }

      .flex .middle {
        flex: 1;
        height: 100%;
        background: #0ff;
      }

      .flex .bottom {
        height: 100px;
        background: yellow;
      }
    </style>
    <article>
      <div class="top"></div>
      <div class="middle">上下固定，中间自适应 flex实现</div>
      <div class="bottom"></div>
    </article>
  </section>

3. display: table;实现

<section class="top-bottom table">
    <style>
      html,
      body,
      .table,
      article {
        height: 100%;
      }

      .table article {
        display: table;
        width: 100%;
      }

      .table article div {
        width: 100%;
        display: table-row;
      }

      .table .top {
        height: 100px;
        background: red;
      }

      .table .middle {
        background: #0ff;
      }

      .table .bottom {
        height: 100px;
        background: yellow;
      }
    </style>
    <article>
      <div class="top">top</div>
      <div class="middle">上下固定，中间自适应 table实现</div>
      <div class="bottom">bottom</div>
    </article>
  </section>

4. display:grid;实现

<section class="top-bottom grid">
    <style>
      html,
      body,
      .grid,
      article {
        height: 100%;
      }

      .grid article {
        display: grid;
        width: 100%;
        grid-template-rows: 100PX auto 100px;
      }

      .grid article div {
        width: 100%;
        display: grid-row;
      }

      .grid .top {
        background: red;
      }

      .grid .middle {
        height: 100%;
        background: #0ff;
      }

      .grid .bottom {
        background: yellow;
      }
    </style>
    <article>
      <div class="top">top</div>
      <div class="middle">上下固定，中间自适应 grid实现</div>
      <div class="bottom">bottom</div>
    </article>
  </section>