CSS3：盘点4种div⾃动铺满剩余空间的实现需求：项⽬中有很多带标题的⾯板，⾯板容器⼤⼩固定，title⾼度固定，body需要铺满剩余空间。
1、通过padding减⼩内部空间（很粗暴）
外层box-sizing: border-box; 同时设置padding: 30px 0 0；
内层30像素⾼的元素向上移动30像素，或使⽤absolute定位防⽌占据空间；
另⼀个元素直接height: 100%
2、position：absolute
html的flex布局外层容器position: relative；
百分百⾃适应元素直接position: absolute; top: 100px; bottom: 0; left: 0
3.Flex 布局（推荐）
弹性布局，title⾼度变化不影响布局，body将⾃动占满剩余空间。
ps：如果计划采⽤flex布局，⼦元素布局排版尽量都⽤flex的
4.height:calc() 表达式计算剩余⾼度
表达式计算出⾼度后再赋给body
ps：⽤的很舒服，不⽤太多其他设置

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。