上下定高 中间自适应_前端知识点之三栏布局 左右宽度固定 上下高度固定 中间自适应 几种解决办法...

“题目：假设高度已知，请写出三栏布局，其中左、右栏的宽度为 300px，中间自适应”

面试经常会遇到这样的一道题来考察对页面布局的基本功，相信大部分人都会想到通过 float 和绝对定位这两种方法来实现，但是想要在面试官面前得到更多的认可，还需要列举出更多的解决办法和优缺点：

三栏布局 左右宽度固定 中间自适应 五种解决办法

以下五种解决办法的公共样式

/* 偷懒样式重置 */

html * { margin: 0; padding: 0; }

.layout { margin-top: 20px; }

.layout .container > div { height: 100px; }

第一种：浮动解决方案：

1.兼容性好，

2.三栏高度互不影响，

3.需要清除浮动

.layout.float .left { float: left; width: 300px; background-color: gray; }

.layout.float .right { float: right; width: 300px; background-color: gray; }

.layout.float .center { margin: 0 300px; background-color: #ddd; }

三栏布局 左右宽度固定 中间自适应

浮动解决方案

第二种：绝对定位解决方案：

1.兼容性好，

2.三栏高度互不影响，

3.内容脱离文档流

4.适用范围不广

.layout.absolute .container { height: 100px; position: relative; }

.layout.absolute .left { position: absolute; left: 0; top: 0; width: 300px; background-color: gray; }

.layout.absolute .right { position: absolute; right: 0; top: 0; width: 300px; background-color: gray; }

.layout.absolute .center { position: absolute; left: 300px; right: 300px; top: 0; background-color: #ddd; }

三栏布局 左右宽度固定 中间自适应

绝对定位解决方案

第三种： flexbox 解决方案：

1.适用于移动端布局，

2.使用简单

3.兼容性较差，

4.如果未设置高度，三栏高度由内容撑开，始终等高

.layout.flexbox .container { display: flex; }

.layout.flexbox .left { width: 300px; background-color: gray; }

.layout.flexbox .right { width: 300px; background-color: gray; }

.layout.flexbox .center { flex: 1; background-color: #ddd; }

三栏布局 左右宽度固定 中间自适应

flexbox 解决方案

第四种： table 解决方案：

1.兼容性好

2.如果未设置高度，三栏高度由内容撑开，始终等高

3.设置 vertical:middle 可以使内联元素/文本内容垂直居中

4.三栏高度由内容撑开，始终等高

.layout.table .container { display: table; width: 100%; }

.layout.table .container > div { display: table-cell; }

.layout.table .left { width: 300px; background-color: gray; }

.layout.table .right { width: 300px; background-color: gray; }

.layout.table .center { background-color: #ddd; }

三栏布局 左右宽度固定 中间自适应

table 解决方案

第五种： Grid 解决方案:

1.兼容性很差，只支持高版本的浏览器

2.讲真，这个我不太懂，后续学习下。

.layout.grid .container { display: grid; grid-template-columns: 300px auto 300px; }

.layout.grid .left { background-color: gray; }

.layout.grid .right { background-color: gray; }

.layout.grid .center { background-color: #ddd; }

三栏布局 左右宽度固定 中间自适应

grid 解决方案

效果图：

QQ图片20190105152429.png

三栏布局 上下高度固定 中间自适应 四种解决方案

第一种：绝对定位解决方案：

/* 偷懒样式重置 */

html * { margin: 0; padding: 0; }

html,

body { width: 100%; height: 100%; }

.layout { position: relative; width: 100%; height: 100%; }

.layout .header,

.layout .footer { height: 100px; width: 100%; position: absolute; background-color: #ddd; }

.layout .header { top: 0; }

.layout .footer { bottom: 0; }

.layout .content { position: absolute; top: 100px; right: 0; left: 0; bottom: 100px; background-color: #999; }

头部

中间部分 高度自适应

绝对定位 解决方案

底部

第二种： flex解决方案

/* 偷懒样式重置 */

html * { margin: 0; padding: 0; }

html,

body { width: 100%; height: 100%; }

.layout { width: 100%; height: 100%; display: flex; flex-direction: column; }

.layout .header,

.layout .footer { height: 100px; width: 100%; background-color: #ddd; }

.layout .content { flex: 1; background-color: #999; }

头部

中间部分 高度自适应

flex 解决方案

底部

第三种： table解决方案

/* 偷懒样式重置 */

html * { margin: 0; padding: 0; }

html,

body { width: 100%; height: 100%; }

.layout { width: 100%; height: 100%; display: table; flex-direction: column; }

.layout .header,

.layout .footer { display: table-row; height: 100px; width: 100%; background-color: #ddd; }

.layout .content { display: table-row; background-color: #999; }

头部

中间部分 高度自适应

table 解决方案

底部

第四种：grid解决方案

/* 偷懒样式重置 */

html * { margin: 0; padding: 0; }

html,

body { width: 100%; height: 100%; }

.layout { width: 100%; height: 100%; display: grid; grid-template-rows: 100px auto 100px; }

.layout .header,

.layout .footer { background-color: #ddd; }

.layout .content { background-color: #999; }

头部

中间部分 高度自适应

grid 解决方案

底部

嗯，对的，和上面的横向排列类似，就是竖直方向浮动不再能用移动端比较，这种需求在常见，需要上下固定，中间部分能滚动，

左宽度固定，右自适应

右宽度固定，左自适应

上高度固定，下自适应

下高度固定，上自适应

还有常见的两栏布局也同样适用以上布局方法

以上为学习笔记，参考资料： 慕课网的课程