1. Introduction
Recently, we need to realize a small requirement on the page, that is, the page head is fixed, but the left menu and content can be scrolled, that is, the three-column format of the basic background system, as shown in the figure:
Of course, this kind of page is just so so for me, who has ten years of code experience and has been playing around with it all the time.
2. Analysis & Implementation
2.1 implementation
First, since the layout of the header and content follows the browser, an entire page must have a Flex layout. So, the basic page architecture looks something like this:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html.body {
width: 100%;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
width: 100%;
}
.header {
flex-basis: 50px;
background-color: burlywood;
flex-shrink: 0;
}
.body {
flex: 1;
overflow: auto;
background-color: brown;
}
.left {
width: 200px;
height: 100%;
overflow: auto;
background-color: blueviolet;
}
.right {
height: 100%;
flex: 1;
overflow: auto;
}
.main {
display: flex;
flex: 1;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header class="header"></header>
<div class="main">
<div class="left"></div>
<div class="right">
</div>
</div>
</div>
</body>
</html>
Copy the codeThe sample is as follows
2.2 test
Here’s a simple test to fill in the content:
As you can see, the basic effect is ok. A basic layout is now complete.
3. Summary
A basic three-column layout can use elastic layout, of course, in real projects, also need to consider responsive, of course, it is easy to set min-widht,min-height.
Give it a thumbs up if you’re interested.
