introduce
- 1. Add the position: relative; style
- Multiple div
- All the way down
- Each page div height needs to be set
style
code
< HTML > <head> <title> Website layout </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta http-equiv="Content-Type" content="text/html; Charset = utf-8 "> < / head > < script SRC =" https://code.jquery.com/jquery-3.3.1.js "> < / script > < style > body {margin: 0 px; padding:0px; } ::-webkit-scrollbar { width: 10px; /* Height: 10px; -webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: rosybrown; border-radius: 3px; } /* Define slider color, inner shadow and rounded corners */ ::-webkit-scrollbar-thumb{border-radius: 7px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #E8E8E8; } /* Webkit-scrollbar-button {background-color:#E8E8E8; background-color:#E8E8E8; } /* Define the style of the bottom right corner */ ::-webkit-scrollbar-corner {background:khaki; } .s1{ position:relative; width:100%; height:60px; line-height:60px; background:#000; color:rgb(218, 97, 97); } .s1 h3{margin-left:20px; } .s2{ position:relative; width:100%; background-color:aquamarine; height:500px; } .s3{ position:relative; width:100%; background-color:rgb(47, 151, 117); height:500px; } .s4{ position:relative; width:100%; background-color:rgb(59, 165, 130); height:500px; } .s5{ position:relative; width:100%; background-color:rgb(35, 94, 74); height:500px; } </style> <body> <div class="s1"> <h3>logo</h3> </div> <div class="s2" ></div> <div class="s3" ></div> <div class="s4" ></div> <div class="s5" ></div> </body> <script> var glb = { init:function(){ } } glb.init(); </script> </html>Copy the code
ok
Continuously updated