首页 > 代码库 > 两侧边栏固定宽 主内容自适应
两侧边栏固定宽 主内容自适应
效果图:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{padding:0;margin:0;} *{box-sizing:border-box;} .side-left{width:200px;min-height:500px;background:red;float:left;padding:10px;margin-right:-100%;position:relative;} .side-right{width:200px;min-height:500px;background:yellow;float:left;padding:10px;margin-left:-200px;position:relative;} .main{width:100%;float:left;} .main-inner{min-height:500px;background:blue;margin:0 200px;padding:10px;} </style> </head> <body> <div class="side-left">左边栏</div> <div class="main"> <div class="main-inner"> 主内容 </div> </div> <div class="side-right">右边栏</div> </body> </html>
这是利用负外边距的方法
主内容需要2层div
1、外层宽度100%,左浮动
2、内层给一个最小高度,左边和右边为了空出200px需要给一个margin:0 200px
左边栏宽度200px,高500px
1、左浮动
2、为了让主内容能够浮动在它的右边,需要给一个margin-right:-100%
3、给一个相对定位,否则左边栏的内容点击不到。
右边栏宽度200px,高500px
1、左浮动
2、为了浮动在主内容右边,需要给一个margin-left:-200px
3、给一个相对定位,否则右边栏的内容点击不到。
注意:如果主内容也给了相对定位,那么需要用z-index调节他们的层级关系。
另外,如果需要内容优先,那么要把main放到side的前面
<body> <div class="main"> <div class="main-inner"> 主内容 </div> </div> <div class="side-left">左边栏</div> <div class="side-right">右边栏</div> </body>
调整css样式:
.side-left{width:200px;min-height:500px;background:red;float:left;padding:10px;margin-left:-100%;position:relative;}
其实只是把margin-right改成了margin-left,因为调整后的html结构side-left在main的右边,而main是100%宽,给一个margin-left:-100%,便可以使它跑到窗口的最左边。
两侧边栏固定宽 主内容自适应
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。