1. Some pages have less content and can't support the entire screen. As a result, the bottom content is displayed in the middle of the screen.
2. The middle part realizes the holy grail layout
Effect picture:
Code:
Mainly used flex:1;
<html>
<head>
<meta charset="utf-8"/>
<title>When the content is too small, the bottom content is not at the bottom of the browser</title>
<style type="text/css">
*{ margin:0px ; padding:0px; } .container{ display:flex; flex-direction:column; width:100%; height:100%; text-align:center; } .top{ width:100%; min-height:60px; } .middle{ flex:1; background:#8791b7; min-height:600px;
display:flex;
}
.center{ flex:1; } .left{ width:50px; background:red; } .right{ width:50px; background:red; } .bottom{ width:100%; min-height:60px ; background:#ccc; } /* The effect of flex:1; flex-grow: 1; // This means that the div will grow in the same proportion as the window size flex-shrink: 1; // This means that the div will grow The same scale reduction as the window size
flex-basis: 0; // This means that the div has no such starting value and will occupy the screen according to the available screen size. For example:-If there are 3 divs in the wrapper, each div will occupy 33%
*/
</style>
</head>
<body>
<div class="container">
<div class="top">top </div>
<div class="middle">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div >
</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>