这篇文章主要给大家分享css实现三列自适应布局的方法，本文给大家介绍了五种方法，为了按照常规WEB布局，这里全部采用拥有header和footer模式进行左中右布局编写。实现方法及代码如下，需要的朋友可以参考。

第一种：基于float实现

实现思路

常规思路，使左右两个Aside分别浮动至左右两侧即可

代码实现

<!-- HTML部分 -->
<div class="container">
  <!-- 顶部Header -->
  <header>这里是头部</header>
  <!-- 中间aside及content -->
  <div class="middle clearfix">
    <aside class="left"></aside>
    <aside class="right"></aside>
    <!-- 中间content显示内容 为了防止将右侧挤下去故放置在右侧栏下方 -->
    <div class="content">这里是内容</div>
  </div>
  <!-- 底部Footer -->
  <footer></footer>
</div>
<!-- CSS部分 -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  .clearfix {
    zoom: 1;
    &::after {
      display: block;
      content: ' ';
      clear:both
    }
  }
  
  html, body {
    width: 100%;
    height: 100%
    }
    .container {
      width: 100%
      height: 100%
      header {
        height: 80px;
        background: rgba(0, 0, 0, 0.5)
      }
      footer {
        height: 80px;
        background: rgba(0, 0, 0, 0.5)
      }
      .middle {
        height: calc(100% - 80px - 80px)
        aside {
          height: 100%;
          width: 300px;
          background: rgba(156, 154, 249, 1)
        }
        .left {
          float: left
        }
        .right: {
          float: right
        }
      }
    }
  }
</style>

实现效果

第二种：基于position：absolute实现

实现思路

为中间三栏父级赋予position: relative，赋予左右Aside position: absolute，并且分别赋予left: 0 right: 0 width:自定义值，赋予中间content left，right 分别等于左右width即可

代码实现

<!-- HTML相关代码 -->
<div class="container">
  <!-- 顶部Header -->
  <header></header>
  <div class="middle">
    <!-- 左侧Aside -->
    <aside class="left"></aside>
    <!-- 中间content内容 -->
    <div class="content">这里是内容</div>
    <!-- 右侧Aside -->
    <aside class="right"></aside>
  </div>
  <!-- 底部Footer -->
  <footer></footer>
</div>
<!-- CSS相关代码 -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0
  }
  
  html, body {
    width: 100%;
    height: 100%
  }
  
  .container {
    width: 100%;
    height: 100%;
    header {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    footer {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    .middle {
      height: calc(100% - 80px - 80px);
      position: relative;
      aside,
      .content {
        position: absolute;
      }
      .left {
        width: 300px;
        background: rgba(156, 154, 249, 1);
        left: 0;
        height: 100%;
      }
      .right {
        width: 300px;
        background: rgba(156, 154, 249, 1);
        right: 0;
        height: 100%;
      }
      .content {
        left: 300px;
        right: 300px;
      }
    }
  }
</style>

实现效果

第三种：基于display：flex实现

实现思路

赋予左中右三列父级display: flex，赋予左右Aside width自定义，赋予中间content flex:1即可

代码实现

<!-- HTML相关代码 -->
<div class="container">
  <!-- 顶部Header -->
  <header></header>
  <div class="middle">
    <!-- 左侧Aside -->
    <aside class="left"></aside>
    <!-- 中间content内容 -->
    <div class="content">这里是内容</div>
    <!-- 右侧Aside -->
    <aside class="right"></aside>
  </div>
  <!-- 底部Footer -->
  <footer></footer>
</div>
<!-- CSS部分 -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  html, body {
    width: 100%;
    height: 100%;
  }
  
  .container {
    header {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    footer {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    .middle {
      display: flex;
      height: calc(100% - 80px - 80px);
      aside {
        width: 300px;
        background: rgba(156, 154, 249, 1);
      }
      .content: {
        flex: 1;
      }
    }
  }
</style>

实现效果

第四种：基于display: table实现

实现思路

赋予左中右三列父级display: table, width: 100%，分别赋予左中右三列display: table-cell，分别赋予左右Aside width即可。

代码实现

<!-- HTML相关代码 -->
<div class="container">
  <!-- 顶部Header -->
  <header></header>
  <div class="middle">
    <!-- 左侧Aside -->
    <aside class="left"></aside>
    <!-- 中间content内容 -->
    <div class="content">这里是内容</div>
    <!-- 右侧Aside -->
    <aside class="right"></aside>
  </div>
  <!-- 底部Footer -->
  <footer></footer>
</div>
<!-- CSS部分 -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  html, body {
    width: 100%;
    height: 100%;
  }
  
  .container {
    header {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    footer {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    .middle {
      display: table;
      width: 100%
      height: calc(100% - 80px - 80px);
      aside {
        width: 300px;
        display: table-cell;
        background: rgba(156, 154, 249, 1);
      }
      .content: {
        display: table-cell;
      }
    }
  }
</style>

实现效果

第五种：基于display: grid实现

实现思路

赋予左中右三列父级display: grid，并且使用grid-template-columns: 300px auto 300px，将其分为宽为300px、auto、300px三列布局即可。

代码实现

<!-- HTML相关代码 -->
<div class="container">
  <!-- 顶部Header -->
  <header></header>
  <div class="middle">
    <!-- 左侧Aside -->
    <aside class="left"></aside>
    <!-- 中间content内容 -->
    <div class="content">这里是内容</div>
    <!-- 右侧Aside -->
    <aside class="right"></aside>
  </div>
  <!-- 底部Footer -->
  <footer></footer>
</div>
<!-- CSS部分 -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  html, body {
    width: 100%;
    height: 100%;
  }
  
  .container {
    header {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    footer {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    .middle {
      display: grid;
      grid-template-columns: 300px auto 300px;
      height: calc(100% - 80px - 80px);
      aside {
        background: rgba(156, 154, 249, 1);
      }
    }
  }
</style>

实现效果

    关于css实现三列自适应布局的方法就介绍到这，上述方法及代码具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多css实现三列自适应布局的方法，大家可以关注其它的相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS position属性取值sticky有什么用，用法是什么？

  对于CSS position属性不少朋友应该都不陌生，这篇文章我们来了解position: sticky的相关内容，一些朋友可能对sticky比较陌生，不知道sticky可以做什么及用法是什么，对此下面小编就给大家来详细的介绍一下，有需要的朋友可以参考，接下来就跟随小编来一起学习一下吧！

• 在CSS中背景图全显示的方法是什么，要注意什么

  在css中，可以利用“background-size”属性把背景图片显示完全，该属性用于规定背景图像的尺寸，只需要给元素添加“background-size:100% 100%;”样式即可把背景图片显示完全。

• CSS3中poninter-events是什么意思，怎样使用

  本篇文章主要介绍了css3 pointer-events，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• 如何使用CSS3写多种效果的条纹背景，代码是什么

  这篇文章主要介绍了CSS3制作酷炫的条纹背景的相关资料,需要的朋友可以参考下

• 如何利用CSS画一个三角形，代码是什么

  CSS绘制三角形：1、画出三角形的原理是调整border（边框）的四个方向的宽度，线条样式以及颜色。2、如果将宽度调的足够大，改变不同方向的颜色，就可以发现盒模型的border是四个梯形一样的线条。