css div填满剩余高度

css div填满剩余高度

核心要点

子绝父相同时设置top和bottom来填充剩余垂直空间

.father { /* 父元素必须设置为相对定位，否则子元素会相对于整个页面进行定位 */ position: relative; height: 200px; width: 100px; background: green;}.child1 { height: 50px; background: blue;}.child2 { background: red; /* 子元素用绝对定位，同时父元素需设置相对定位，否则子元素会相对于整个页面进行定位 */ position: absolute; /* 50px 为其他元素已占据的父元素空间的高度 */ top: 50px; /* 同时设置top和bottom来填充剩余垂直空间 */ bottom: 0; /* 同时设置left和right来填充剩余水平空间 */ left: 0; right: 0;}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。