【css】实现圣杯布局的方法（这里列举的是两端固定值，中间自适应）

本文链接：https://blog.youkuaiyun.com/weixin_43444977/article/details/129773866

在这里插入图片描述
方法1：使用flex布局。中间自适应的部分为：flex:1；

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>圣杯布局</title>
    </head>
<body>

  <div class="wrap">
	<div class="left">left</div>
	<div class="middle">middle</div>
	<div class="right">right</div>
  </div>  
       
<script>
           
</script>

<style>
.wrap{
width:100vw;
height:100vh;
display:flex;
}
 .left{
	width:100px;
	background:red;
	height:100%;
 } 
.right{
 width:100px;
 heigth:100%;
 background:red;
} 
.middle{
  flex:1;
  background:blue;
}
        
</style>
 
</body>
</html>

方法2：使用浮动定位。calc(100% - 200px)；(减号要空两格)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>圣杯布局</title>
    </head>
<body>

  <div class="wrap">
	<div class="left">left</div>
	<div class="middle">middle</div>
	<div class="right">right</div>
  </div>  
       
<script>
           
</script>

<style>
.wrap{
width:100vw;
height:100vh;
}
 .left{
	width:100px;
	background:red;
	height:100%;
	float:left;
 } 
.right{
 width:100px;
 height:100%;
 background:red;
 float:right;
} 
.middle{
  width:calc(100% - 200px);
  height:100vh;
  float:left;
  background:blue;
  
}
        
</style>
 
</body>
</html>

方法3：使用positon定位。calc(100% - 200px);

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>圣杯布局</title>
    </head>
<body>

  <div class="wrap">
	<div class="left">left</div>
	<div class="middle">middle</div>
	<div class="right">right</div>
  </div>  
       
<script>
           
</script>

<style>
.wrap{
width:100vw;
height:100vh;
}
.left{
	width:100px;
	background:red;
	height:100%;
	position:absolute;
	left:0;
	top:0;
 } 
.right{
 width:100px;
 height:100%;
 background:red;
 position:absolute;
 right:0px;
 top:0px;
} 

.middle{
  width:calc(100% - 200px);
  height:100vh; 
  background:blue;
  position:absolute;
  left:100px;
  top:0px;
  
}
        
</style>
 
</body>
</html>