概述:圣杯模式和双飞翼模式是一种经典布局,用以实现 侧边栏宽度固定,主体部分自适应且优先渲染的一种布局方法;
圣杯模式完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
min-width: 550px;
font-weight: bold;
font-size: 20px;
}
.header, .footer{
background: rgba(0, 0, 0, 0.5);
text-align: center;
height: 60px;
line-height: 60px;
}
.container{
position: relative;
min-height: 300px;
padding-left: 200px;
padding-right: 150px;
overflow: hidden;
}
.main , .left , .right{
position: relative;
float: left;
text-align: center;
height: 300px;
line-height: 300px;
}
.main{
width: 100%;
background-color: red;
}
.left{
width: 200px;
background-color: lightblue;
right: 200px;
margin-left: -100%;
}
.right{
width: 150px;
margin-right: -150px;
background-color: yellow;
}
</style>
</head>
<body>
<header class="header"> header</header>
<div class="container">
<main class="main">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero odio id incidunt aliquid aliquam eius rem? Corporis ratione minima consectetur itaque, non provident necessitatibus, nostrum magni asperiores officiis dignissimos iure.</main>
<aside class="left">left</aside>
<aside class="right">right</aside>
</div>
<footer class="footer">footer</footer>
</body>
</html>