【关键点】1,绝对定位从普通文档流中脱离出来,中间元素可以不用考虑左右定位元素占的位置
2,左右栏绝对定位到确定的位置上,(absolute,left,right)
3,中间栏左右外边距设置为左右栏的宽度,因此自身宽度就自适应的变成了窗口宽度-左右两边栏的宽度
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 html,body{ 6 margin:0; 7 padding:0; 8 height:100%; 9 } 10 #left,#right{ 11 background-color:yellow; 12 position:absolute; 13 top:0; 14 width:100px; 15 height:100%; 16 } 17 #left{ 18 left:0; 19 } 20 #right{ 21 right:0; 22 } 23 #center{ 24 background-color:green; 25 height:100%; 26 margin:0 100px; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="left">左边栏</div> 32 <div id="right">右边栏</div> 33 <div id="center">中间栏</div> 34 </body> 35 </html>
【关键点】与绝对定位类似,中间的自适应宽度是靠设置相对于窗口 的外边距来确定的,左右栏从文档流中脱离,浮动的各自位置
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 html,body{ 6 margin:0; 7 padding:0; 8 height:100%; 9 } 10 #left,#right{ 11 background-color:yellow; 12 width:100px; 13 height:100%; 14 } 15 #left{ 16 float:left; 17 } 18 #right{ 19 float:right; 20 } 21 #center{ 22 background-color:green; 23 height:100%; 24 margin:0 100px; 25 } 26 </style> 27 </head> 28 <body> 29 <div id="left">左边栏</div> 30 <div id="right">右边栏</div> 31 <div id="center">中间栏</div> 32 </body> 33 </html>
【关键点】1,中间栏由里外两层构成,外层撑起整个内容区域,内层进行中间栏的布局,设置内层的左右外边距给左右栏留出空间
2,左右栏浮动并设置负的外边距浮动到相应位置
3,中间栏先于左右栏定位(三个div的位置顺序一定是中间栏在前)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 html,body{ 6 height:100%; 7 margin:0; 8 padding:0; 9 } 10 #main{ 11 margin:0; 12 padding:0; 13 width:100%; 14 height:100%; 15 float:left; 16 } 17 #inner{ 18 margin:0 200px; 19 background-color:green; 20 height:100%; 21 } 22 #left,#right{ 23 width:200px; 24 height:100%; 25 float:left; 26 background-color:#a0b3d6; 27 } 28 #left{ 29 margin-left:-100%; 30 } 31 #right{ 32 margin-left:-200px; 33 } 34 </style> 35 </head> 36 <body> 37 <div id="main"> 38 <div id="inner">this is main content</div> 39 </div> 40 <div id="left">this is left sidebar content</div> 41 <div id="right">this is right siderbar content</div> 42 </body> 43 </html>
代码没有考虑一些低版本浏览器的兼容性,只做了一些简单的flex属性设置,但是效果很明显
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 html,body{ 6 margin:0; 7 padding:0; 8 height:100%; 9 } 10 body{ 11 display:flex; 12 align-items:stretch; 13 } 14 #left,#right{ 15 background-color:yellow; 16 flex:0 100px; 17 } 18 #center{ 19 background-color:green; 20 flex:1 auto; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="left">左边栏</div> 26 <div id="center">中间栏</div> 27 <div id="right">右边栏</div> 28 </body> 29 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 html,body{ 6 height:100%; 7 margin:0; 8 padding:0; 9 } 10 #left,#right { 11 float: left; 12 margin: 0 0 0 -271px; 13 width: 50%; 14 height:100%; 15 } 16 17 #main { 18 width: 540px; 19 float: left; 20 background: green; 21 height:100%; 22 } 23 #left .inner,#right .inner { 24 margin: 0 0 0 271px; 25 background: orange; 26 height:100%; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="left"> 32 <div class="inner">this is left sidebar content</div> 33 </div> 34 <div id="main">this is main content</div> 35 <div id="right"> 36 <div class="inner">this is right siderbar content</div> 37 </div> 38 </body> 39 </html>
<!DOCTYPE html> <html> <head> <style> html,body{ margin:0; padding:0; height:100%; } body{ display:flex; align-items:stretch; } #left,#right{ background-color:yellow; flex:1 auto; } #center{ background-color:green; flex:0 500px; } </style> </head> <body> <div id="left">左边栏</div> <div id="center">中间栏</div> <div id="right">右边栏</div> </body> </html>
【关键点】1、首先让左边栏浮动到自己的位置,已经确定了大小宽度
2,中间栏设置内外两层,外层宽度为100%,然后有一个左边栏宽度的负margin,这样就可以放下左边栏了
3,内层设置外边距为左边栏宽度,在确定的位置显示
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 html,body{ 6 height:100%; 7 margin:0; 8 padding:0; 9 } 10 #left{ 11 background: green; 12 float: left; 13 width: 200px; 14 height:100%; 15 } 16 17 #main { 18 width: 100%; 19 height:100%; 20 float: left; 21 margin:0 0 0 -200px; 22 } 23 #inner { 24 margin: 0 0 0 200px; 25 background: orange; 26 height:100%; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="left"> 32 <div class="inner">this is left sidebar content</div> 33 </div> 34 <div id="main"> 35 <div id="inner">this is main content</div> 36 </div> 37 </body> 38 </html>
【关键点】1,左边绝对定位,右边就可以跟左边放在一排
2,右边通过设置外边距来决定自己的大小了
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 html,body{ 6 height:100%; 7 margin:0; 8 padding:0; 9 } 10 #left{ 11 background: green; 12 position:absolute; 13 width: 200px; 14 height:100%; 15 top:0; 16 left:0; 17 } 18 19 #main { 20 height:100%; 21 margin-left:200px; 22 background-color:purple; 23 } 24 </style> 25 </head> 26 <body> 27 <div id="left"> 28 <div class="inner">this is left sidebar content</div> 29 </div> 30 <div id="main">this is the main content</div> 31 </body> 32 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 html,body{ 6 margin:0; 7 padding:0; 8 height:100%; 9 } 10 body{ 11 display:flex; 12 align-items:stretch; 13 } 14 #left{ 15 background-color:yellow; 16 flex:0 200px; 17 } 18 #center{ 19 background-color:green; 20 flex:1 auto; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="left">左边栏</div> 26 <div id="center">中间栏</div> 27 </body> 28 </html>
【最后,关于负外边距:就相当于一个透明的相纸折在了元素的内容上,其他的元素如果在负外边距上是可以把外边距的部分遮盖掉的,但是如果元素有内容并没有被遮盖,还是可以显示】