css经典布局上下左右

绝地灬酷狼 2021-10-23 20:42 682阅读 0赞

头部：定高100px，宽度自适应100%
左侧：定宽200px，高度铺满
右侧：宽度铺满自适应，高度铺满
底部：定高50px，宽度100%

整体页面无滚动条，内容区有滚动条

页面样式：
在这里插入图片描述

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>css经典布局</title>
  6.         <style> html,body{ margin: 0;padding: 0;width: 100%;height: 100%; overflow: hidden;} .header{ width: 100%;height: 100px;} .content{ width: 100%;position: absolute;top: 100px;bottom: 50px;} .menu{ width:200px;height: 100%;float:left;overflow: auto;background-color: aliceblue;} .main{ height: 100%;margin-left:200px;overflow: auto;background-color: bisque;} .footer{ width: 100%;height: 50px; position: fixed;bottom: 0;z-index: 10;} </style>
  7.     </head>
  8.     <body>
  9.         <div class="header">header</div>
  10.         <div class="content">
  11.             <div class="menu">menu</div>
  12.             <div class="main"> main </div>
  13.         </div>
  14.         <div class="footer">footer</div>
  15.     </body>
  16. </html>

发表评论

表情：
评论列表 （有 0 条评论，682人围观）

还没有评论，来说两句吧...

相关阅读