body { padding: 0; margin: 0; overflow: hidden; }
div { display: block; position: relative; }
.content-header { height: 100px; background-color: blue; }
.content-body { background-color: yellow; height: calc(100vh - 200px); overflow-x: hidden; overflow-y: auto; }
.content-footer { height: 100px; background-color: green; } | <!DOCTYPE HTML> <html lang="en-EN"> <head> <title>Layout Sample</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="no" /> <link href="./layout.css" rel="stylesheet"> </head> <body> <div class="content-header"> Header </div> <div class="content-body"> Body <ul> <li></li> </ul> </div> <div class="content-footer"> Footer </div> </body> </html> |