面试中可能会出现这样的的题目：蓝色高度固定，红色宽度固定高度自适应铺满屏幕，黄色自适应。
方法一：绝对定位，浮动，左边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自适应布局</title> <style> *{padding:0;margin:0;} body,html{height:100%;} /*蓝色绝对定位，内容区域内边距，左侧红块左浮动，右侧黄块设置左边距；注意使用box-sizing: border-box；改变盒模型*/ .header{position: absolute;top:0;left:0; 100%;height:100px;background: blue} .content{position: relative;padding:110px 0 0;height:100%;box-sizing: border-box;} .left{ 200px;height: 100%;float: left;background:red;} .right{height: 100%;background: yellow;margin-left:210px;} </style> </head> <body> <div class="header"></div> <div class="content"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
方法二：绝对定位的非绝对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自适应布局</title> <style> *{padding:0;margin:0;} body,html{height:100%;}
/*内容区域绝对定位设置top,left,right,bottom让其充满屏幕*/
.header{height:100px;background: blue}
.content{position: absolute;margin-top: 110px;top:0;left:0;right:0;bottom:0;}
.left{ 200px;height: 100%;float: left;background:red;}
.right{height: 100%;background: yellow;margin-left:210px;} </style> </head> <body> <div class="header"></div> <div class="content"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
方法三：方法二的改造，固定定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自适应布局</title> <style> *{padding:0;margin:0;} body,html{height:100%;} /*方法二改造，蓝色块固定定位*/ .header{height:100px;background: blue;position: fixed;top:0;left:0; 100%;} .content{position: absolute;margin-top: 110px;top:0;left:0;right:0;bottom:0;} .left{width: 200px;height: 100%;float: left;background:red;} .right{height: 100%;background: yellow;margin-left:210px;} </style> </head> <body> <div class="header"></div> <div class="content"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
方法四：方法一的改造
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自适应布局</title> <style> *{padding:0;margin:0;} body,html{height:100%;} /*蓝色块固定定位*/ .header{position: fixed;top:0;left:0;width: 100%;height:100px;background: blue} .content{position: relative;padding:110px 0 0;height:100%;box-sizing: border-box;} .left{width: 200px;height: 100%;float: left;background:red;} .right{height: 100%;background: yellow;margin-left:210px;} </style> </head> <body> <div class="header"></div> <div class="content"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
总结：
知识有限，目前只想出了这几种，而且第三和第四，说到底也是雷同的，并没什么新颖的点。还有什么其他的方法，还忘提醒下，我这边会再补充的....