上下高度固定中间自适应的布局方式

Posted smdb

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了上下高度固定中间自适应的布局方式相关的知识，希望对你有一定的参考价值。

（1）：定位

子盒子用绝对定位（千万别给父盒子加相对定位）

技术分享图片

（2）flex布局

技术分享图片

（3）使用grid网格布局:

技术分享图片

技术分享图片

（4）使用table布局，一定要套一个空div，要不然整个页面都是空白的

 技术分享图片

 

以上是关于上下高度固定中间自适应的布局方式的主要内容，如果未能解决你的问题，请参考以下文章

三栏布局——上下宽高固定，中间自适应

css经典布局——头尾固定高度中间高度自适应布局

三栏布局-------上下宽高固定，中间自适应

CSS三栏布局实现，左右固定，中间自适应

头尾固定高度中间高度自适应布局

两个div并排，左边div固定宽度，右边宽度自适应”，至少列出4种。