布局—一侧固定宽度,一侧自适应
1.固定宽度区域浮动,自适应区域不设宽度而设margin
注意:sidebar必须在content之前
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #wrap{overflow: hidden;*zoom:1;} #sidebar,#content{background-color: red;height: 300px;} #sidebar{float: right;width: 300px;} #content{margin-right: 310px; } #footter{background-color: yellow;color: red;margin-top: 10px;} </style> </head> <body> <div id="wrap"> <div id="sidebar">固定宽度</div> <div id="content">自适应部分</div> </div> <div id="footter">底部</div> </body> </html>
2.固定宽度绝对定位,自适应区域使用margin
注意:此时,wrap限制不了sidebar,可以给其加固定高度;绝对定位的特性,可先重置默认样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #wrap{overflow: hidden;} #sidebar,#content{background-color: red;height: 100%;} #sidebar{width: 300px;position: absolute;right: 0;top: 0;} #content{margin-right: 310px; } #footter{background-color: yellow;color: red;margin-top: 1em;} </style> </head> <body> <div id="wrap"> <div id="sidebar">固定宽度</div> <div id="content">自适应部分</div> </div> <div id="footter">底部</div> </body> </html>
3.使用浮动和margin
注意:content宽度需要重新设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #wrap{overflow: hidden;} #sidebar,#content{background-color: red;height: 100px;} #sidebar{width: 300px;float: right;} #content{margin-left: -310px;float: left; width: 100%;} #content-box{margin-left: 310px;} #footter{background-color: yellow;color: red;margin-top: 1em;} </style> </head> <body> <div id="wrap"> <div id="content"> <div id="content-box"> 自适应部分 </div> </div> <div id="sidebar">固定宽度</div> </div> <div id="footter">底部</div> </body> </html>
4.使用display:table
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #wrap{overflow: hidden;display: table;width: 100%;} #sidebar,#content{background-color: red;height: 100px;} #sidebar{width: 300px;display: table-cell;} #content{display: table-cell;width: 100%;} #footter{background-color: yellow;color: red;margin-top: 1em;} </style> </head> <body> <div id="wrap"> <div id="content"> 自适应部分 </div> <div id="sidebar">固定宽度</div> </div> <div id="footter">底部</div> </body> </html>
敢想,敢做