<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="header">#header</div>
<div id="container">
<div id="left" class="column">#left</div>
<div id="center" class="column">#center</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
</body>
<style>
body {
min-width: 550px;
font-weight: bold;
font-size: 20px;
height: 100vh;
padding: 0;
margin: 0;
}
#header,
#footer {
background: rgba(29, 27, 27, 0.726);
text-align: center;
height: 60px;
line-height: 60px;
}
#container {
display: flex;
height: calc(100% - 120px);
max-height: 880px;
}
#container .column {
text-align: center;
height: 100%;
line-height: 300px;
}
#left {
width: 200px;
background: rgba(95, 179, 235, 0.972);
}
#right {
width: 200px;
background: rgb(231, 105, 2);
}
#center {
flex: 1;
background: rgb(206, 201, 201);
}
</style>
</html>
