CSS多种三列自适应布局实现

实现 以下布局

第一种：基于float实现

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

代码实现

<!-- HTML部分 -->
<div class="container">
  <!-- 顶部Header -->
  <header>顶部Heade</header>
  <!-- 中间aside及content -->
  <div class="middle clearfix">
    <aside class="left">left</aside>
    <aside class="right">right</aside>
    <!-- 中间content显示内容 为了防止将右侧挤下去故放置在右侧栏下方 -->
    <div class="content">这里是内容</div>
  </div>
  <!-- 底部Footer -->
  <footer>底部Footer</footer>
</div>

<style type="text/less">
*{
	padding:0;
	margin:0;
	font-size:30px;
}
.clearfix {
zoom: 1;
	&::after {
		display: block;
		content: ' ';
		clear:both
	}
}
html,body{
	width:100%;
	height:100%;
}
.container{
	width:100%;
	height:100%;
	header,footer{
		height:80px;
		background-color:#00BCD4;
	}
	.middle {
		height: calc(100% - 80px - 80px);
		aside{
			height:100%;
			width:300px;
			background-color:#CDDC39;
		}
	}
	.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>顶部Heade</header>
  <!-- 中间aside及content -->
  <div class="middle clearfix">
    <!-- 左侧Aside -->
    <aside class="left">left</aside>
    <!-- 中间content内容 -->
    <div class="content">这里是内容</div>
    <!-- 右侧Aside -->
    <aside class="right">right</aside>
  </div>
  <!-- 底部Footer -->
  <footer>底部Footer</footer>
</div>

<style type="text/less">
* {
    margin: 0;
    padding: 0
  }
  html, body {
    width: 100%;
    height: 100%
  }
  .container {
    width: 100%;
    height: 100%;
    header,footer {
      height: 80px;
      background: #00BCD4;
    }
    .middle {
      height: calc(100% - 80px - 80px);
      position: relative;
      aside,.content {
        position: absolute;
      }
	aside{
	  width: 300px;
        background: #CDDC39;
        height: 100%;
	}
      .left {
        left: 0;
      }
      .right {
	 right: 0;
      }
      .content {
        left: 300px;
        right: 300px;
      }
    }
  }
</style>

第三种：基于display：flex实现

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

<!-- HTML部分 -->
<div class="container">
  <!-- 顶部Header -->
  <header>顶部Heade</header>
  <!-- 中间aside及content -->
  <div class="middle clearfix">
    <!-- 左侧Aside -->
    <aside class="left">left</aside>
    <!-- 中间content内容 -->
    <div class="content">这里是内容</div>
    <!-- 右侧Aside -->
    <aside class="right">right</aside>
  </div>
  <!-- 底部Footer -->
  <footer>底部Footer</footer>
</div>
<style type="text/less">
  .container {
    width: 100%;
    height: 100%;
    header,footer {
      height: 80px;
      background: #00BCD4;
    }
    .middle {
      height: calc(100% - 80px - 80px);
      display:flex;
	aside{
	  width: 300px;
        background: rgba(156, 154, 249, 1);
        height: 100%;
	}
      .content {
        flex:1;
      }
    }
  }
</style>

第四种：基于display: table实现

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

<style type="text/less">
  .container {
    width: 100%;
    height: 100%;
    header,footer {
      height: 80px;
      background: #00BCD4;
    }
    .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三列布局即可。

.container {
    width: 100%;
    height: 100%;
    header,footer {
      height: 80px;
      background: #00BCD4;
    }
    .middle {
      display:grid;
	  grid-template-columns: 300px auto 300px;
      height: calc(100% - 80px - 80px);
	  aside{
	    background: rgba(156, 154, 249, 1);
	  }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

https://mp.weixin.qq.com/s/IDog_4HKKyrEv5mg0fKwlg