使用calc()调整元素高度或宽度
短信预约 -IT技能 免费直播动态提醒
<style> .parent { display: flex; padding: 0px 5px; width: 600px; height: 200px; background: #ccc; } .children { margin: 10px 10px; height: calc(100% - 20px); width: calc(100% - 30px); background: skyblue; } style> <div class="parent"> <div class="children">11div> <div class="children">11div> <div class="children">11div> div>在上面增加一个盒子，发现刚才的方块多出去了
<style> .parent { padding: 0px 5px; width: 600px; height: 200px; background: #ccc; } .top{ width: 100%; height: 45px; background: greenyellow; } .children-box { display: flex; height: 100%; } .children { margin: 10px 10px; height: calc(100% - 65px); width: calc(100% - 30px); background: skyblue; } style> <div class="parent"> <div class="top">222div> <div class="children-box"> <div class="children">11div> <div class="children">11div> <div class="children">11div> div> div>
来源地址：https://blog.csdn.net/qq_44161722/article/details/132577395
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
