写代码时候遇到一个适宜小屏的问题:
小屏时候,内层 div 超出外层 div 的包裹,外观不美观。大致如下图所示
一开始我使用滚动条来实现优化,有顿操作:
诶,怎么还是没有变化?最后我发现是因为在这个外层 div 外还有一个大的 div 包裹着,和这个外层div 同级还有一个头部 div,大致如下:
这时候我设置的 height:100%意思是指这个里层主要内容 div 的高度 100%,这时候就达不到我们需要的效果了,所以高度需要动态处理一下。这时候就拿出我们的 calc 函数用于动态计算长度值。
在这个情况里层 div 只需要 最外层div - 里层头部 div,下面是例子
注意
- 需要最外层的高度是 100%,因为calc 函数是一句这个最外层高度来动态设置的,当然要是你有别的需要另说
- 记得观察自己的 div 到底是在怎么样子的情况,从块解读去分解他