两栏三栏布局的变通
本篇幅的内容，算是上一篇的补充
三栏布局，上下高度固定，中间自适应
1）绝对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0px; margin: 0px } .box div{ position: absolute; } .head{ top: 0; width:100%; height: 100px; background: red } .middle{ top: 100px; bottom: 100px; width:100%; background: yellow; overflow: auto; } .footer{ bottom: 0px; background: blue; height: 100px; width: 100% } </style> </head> <body> <div class="box"> <div class="head"></div> <div class="middle"> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> <p>111<p> </div> <div class="footer"></div> </div> </body> </html>
2) flex布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0px; padding: 0px; } .box { display: flex; background: red; flex-direction: column; height: 100vh } .head { flex: 0 0 300px; background: #53DE30; } .middle { flex: 1; background: #B6D51E; } .foot { flex: 0 0 300px; background: #EFBD59; } </style> </head> <body> <div class="box"> <div class="head">1</div> <div class="middle"> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> </div> <div class="foot">3</div> </div> </body> </html>
这两个布局，当中间的内容超过了区域的高度的时候，绝对定位的时候，直接overflow设置为auto，采用flex布局的时候，当我们内容超过容器的宽度的时候，他会自动的撑开内容区域的高度。
这里用到了一个新的属性
height: 100vh
这个意思是，占据电脑屏幕可用的全部高度，我们没有设置height:100%，因为这个根本无法取到这个高度，注意，是这个电脑荧幕的可用高度，而不是页面的高度，页面由于会出现滚动条，但是可视区域的高度，就是电脑荧幕的可用高度
两栏布局：左宽度固定，右边自适应
1）浮动布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0px; margin: 0px; } .box { width: 100%; } .left { background: #1164F6; float: left; width: 100px; } .right { background: #F5F716; } </style> </head> <body> <div class="box"> <div class="left">1</div> <div class="right"> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> </div> </div> </body> </html>
和三栏布局一样，一旦高度不确定，浮动就会出现问题，而且还有这个文字环绕效果
2）绝对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0px; margin: 0px; } .box div{ position: absolute; } .left { background: #1164F6; left: 0px; width: 100px; } .right { background: red; left: 100px; right: 0px; } </style> </head> <body> <div class="box"> <div class="left">1</div> <div class="right"> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> </div> </div> </body> </html>
绝对定位和这个浮动一样，也只能是高度已知的情况，不然就会出现问题，而且，看着行代码
.right {
background: red;
left: 100px;
right: 0px;
}
我们为什么要把right设置了0，因为你一旦设置了绝对定位，那么这个right元素将会包裹起来，宽度会有内容撑开，而不是原来的占据一行
但是如果我们绝对定位设置了right，那么他的宽度又会被拉开，可以自己注释这一行，看看效果
3）flex布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0px; margin: 0px; } .box{ display: flex; } .left { background: #1164F6; flex: 0 0 100px; } .right { background: red; flex:1; } </style> </head> <body> <div class="box"> <div class="left">1</div> <div class="right"> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> </div> </div> </body> </html>
这个和三栏布局一样，都差不多，是一个目前比较流行的布局
4）表格布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0px; margin: 0px; } .box{ display: table; width: 100% } .box div{ display: table-cell; } .left { background: #1164F6; width: 100px; } .right { background: red; } </style> </head> <body> <div class="box"> <div class="left">1</div> <div class="right"> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> </div> </div> </body> </html>
这个也没有什么难度，和三栏布局的表格布局一样
5）网格布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0px; margin: 0px; } .box{ display: grid; grid-template-columns:100px auto; } .left { background: #1164F6; } .right { background: red; } </style> </head> <body> <div class="box"> <div class="left">1</div> <div class="right"> <p>111</p> <p>111</p> <p>111</p> <p>111</p> </div> </div> </body> </html>
这个布局是最简单的一个，真的是方便的很啊，两句话就搞定了
两栏布局：右宽度固定，左边自适应
这个和上面的差不多，一个是左固定，一个是右固定，以上的5种实现方式，稍作修改，就可以了，这里就不上代码了。
两栏布局：上宽度固定，下边自适应
1）flex布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0px; margin: 0px; } .box { display: flex; flex-direction: column; height: 100vh } .head { flex:0 0 100px; background: red; } .foot{ flex:1; background: yellow; } </style> </head> <body> <div class="box"> <div class="head">1</div> <div class="foot">2</div> </div> </body> </html>
这个和上面的那个 三栏布局，上下高度固定，中间自适应 很类似，这个flex布局，也算是比较流行的移动端的布局
2）绝对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0px; margin: 0px; } .box div{ position: absolute; width: 100% } .head { top:0; height: 100px; background: red; } .foot{ background: yellow; bottom: 0px; top: 100px; } </style> </head> <body> <div class="box"> <div class="head">1</div> <div class="foot">2</div> </div> </body> </html>
同样的，这个代码也是很类似的，需要注意的是
.box div{ position: absolute; width: 100% }
这里也是一样的，由于绝对定位，导致容器包裹，宽度收缩，所以我们要手动设置宽度，让他撑开整行
两栏布局：下宽度固定，上边自适应
这个和上面的类似，也是不给代码了
总结：以上是我整理的一些布局，当然，还不全面，以后要是遇到了新的布局方案，会保持更新！
