书接上回,使用grid来实现自动占据剩余高度布局

书接上回,看本章前需要阅读上篇笔记 juejin.cn/post/748410...

上回使用flex实现下面这个效果,但是这次使用grid来实现才是更优解。

需求是body最小100vh,当子级变多时body自动扩展。并且让body元素滚动,不是在body内滚动。
当body元素有剩余空间的时候,红色盒子是高度自动扩展的。
现在当页面添加box盒子的时候,box盒子首先压缩红色盒子,压缩到fit-content状态的时候,再扩展父级body盒子高度。让body元素滚动。这是一个非常好的方案。

代码链接在下面,注意是index.html

代码链接在下面,注意是index2.html

grid实现效果代码codesandbox.io/p/sandbox/g...

下图是使用codesandbox内部的预览,这个效果不正确不用管,使用codesandbox的open new tab,在自己新版浏览器效果是正确的。

相关推荐
用户1512905452208 分钟前
css —pointer-events属性_css pointer-events
前端
帅夫帅夫9 分钟前
Axios 入门指南:从基础用法到实战技巧
前端
云边散步10 分钟前
《校园生活平台从 0 到 1 的搭建》第四篇:微信授权登录前端
前端·javascript·后端
讨厌吃蛋黄酥12 分钟前
React样式冲突终结者:CSS模块化+Vite全链路实战指南🔥
前端·javascript·react.js
噔噔42813 分钟前
使用webworker优化大文件生成hash的几种方式
前端
Hilaku21 分钟前
原生<dialog>元素:别再自己手写Modal弹窗了!
前端·javascript·html
NeverSettle1105741 小时前
手把手教你用nodejs + vue3 实现大文件上传、秒传、断点续传
前端·面试
用户1512905452201 小时前
crossorigin注解添加了解决不了跨域问题_CORS与@CrossOrigin详解
前端
Silkide1 小时前
前端数据拷贝简史
前端
码上佳人1 小时前
Echarts如何生成没有上下两端线的箱线图
前端·echarts