神刀安全网

三段式div布局(左固定右自适应)

目的:

界面上模仿简书的主界面布局。即一个大的Navigation包含左边一个primary nav,右边一个middle。一个Main div为内容显示区域,宽度高度均可自适应。如下图:

三段式div布局(左固定右自适应)
2016-09-13_183701.png

三段式div布局(左固定右自适应)
2016-09-13_183744.png

要点:

  • 固定不可滑动添加:position: fixed;
  • nav div靠左边添加:left: 0px;top: 0px;
  • 右边的main div设置margin-left为navigation div的宽度:margin-left: 370px;
  • navigation div需要设置背景颜色,滚动main div时候才不会被覆盖:background-color: #5a5a5a;

代码:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         body{             margin: auto;         }         /*三段式界面布局*/         .com-nav{             width: 370px;             height: 100%;             float:left;             position: fixed;             left: 0px;             top: 0px;         }         .com-primary-nav{             width: 50px;             height: 100%;             float: left;             background-color: #2A2A2A;         }         .com-middle-mav{             width: 320px;             height: 100%;             float: right;             background-color: #5a5a5a;         }         .com-main{             width: auto;             min-width: 530px;             height: 100%;             margin-left: 370px;         }         .box{             background-color: #00b0ff;             width: 700px;             height: 2000px;             margin: 0 auto;         }     </style> </head> <body>     <div class="com-nav">         <div class="com-primary-nav"></div>         <div class="com-middle-mav"></div>     </div>     <div class="com-main">         <div class="box">我是内容卡片!</div>     </div> </body> </html>

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 三段式div布局(左固定右自适应)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址