版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
问答题：
编写 HTML/CSS 代码，实现如下布局。注：如能实现 left bar、content、right bar 的高度，自适应为三者的最高高度，可享额外加分
这题是比较经典的问题了，查了一下资料，有圣杯布局和双飞翼布局两种，不过我自己想到了一个也能解决的方法：
HTML：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>三栏布局</title>
<style>
header {
height: 10vh;
background-color: #7ecef3;
}
div {
position: relative;
}
section.left {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 200px;
height: 80vh;
background-color: #89c997;
}
section.right {
position: absolute;
top: 0;
right: 0;
display: inline-block;
width: 200px;
height: 80vh;
background-color: #89c997;
}
main {
height: 80vh;
background-color: #53b9be;
padding: 0 200px;
}
footer {
height: 10vh;
background-color: #7ecef3;
}
</style>
</head>
<body>
<header>Header</header>
<div>
<section class="left">Left Bar</section>
<main>Content</main>
<section class="right">Right Bar</section>
</div>
<footer>Footer</footer>
</body>
效果如下图：
实现了中间content的自适应。