这是一个创建于 385 天前的主题，其中的信息可能已经有所发展或是发生改变。
网页是 SPA
祖先元素样式：min-height:100%
这样，PC 下大部分场景，可以刚好拉伸主要部分占满屏幕； mobile 大部分场景下，祖先元素自动超出 100%的高度
这点之前一直工作得很好
但特例出现了
一个场景，需要祖先元素高度刚好 100%，不能再多，也不能更少
如果子元素内容太少，填充高度，不能减少祖先元素的高度
如果子元素内容太多，展示垂直滚动条，不能增加祖先元素的高度
chatgpt 和 claude 给的方案：flex-grow: 1; overflow-y: uto;。实际试过了，不行。其中一个例子放下面了，大家可以试着改下
也想到了两个可行方案：
- 当需要这个特例时，发个事件通知祖先元素加上：max-height:100%；当不需要时，再发个事件……
- 将这个特例作为一个单独的 url/页面，换一个 height 固定为 100%的祖先元素……
求教，有没有更好的方案
下面是 claude 给的一个不可行的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { height: 100%; margin: 0; padding: 0; } .container { display: flex; min-height: 100%; flex-direction: column; } .content { flex: 1; overflow-y: auto; /* 内容超出时显示垂直滚动条 */ display: flex; flex-direction: column; } .text-wrapper { flex-shrink: 0; /* 防止内容被压缩 */ overflow-y: auto; /* 文本内容超出时显示滚动条 */ } </style> </head> <body> <div class="container"> 头部应该保持不动 <div class="content"> <div class="text-wrapper"> 这是一段测试文本。这里可以添加很长很长的文本， 当文本内容超过容器高度时，会自动出现垂直滚动条。 同时，容器高度会保持在 100%，不会被限制。 （重复文本以模拟长内容） </div> </div> </div> </body> </html> 第 1 条附言 2024-11-27 21:58:41 +08:00
问题解决
最后在文本元素用绝对定位实现，四个方向都是 0
最后在文本元素用绝对定位实现，四个方向都是 0
 | 1 Absofknglutely 2024-11-27 17:22:04 +08:00 简单粗暴点可以在子元素设置 height: calc(100vh - 22px); |
| 3 Absofknglutely 2024-11-27 17:50:27 +08:00 跟其他子元素已经无关了吧, 不是只管当前这个子元素就可以了么? 不是很明白你的场景了 @wencan |
| 4 Absofknglutely 2024-11-27 17:50:51 +08:00 而且跟 resize 有什么关系呢 |
| 6 Absofknglutely 2024-11-28 08:56:59 +08:00 @wencan 22 是`头部应该保持不动`的高度 |
 | 7 chnwillliu 2024-12-01 16:53:07 +08:00 把 min-height:100% 改成 height:100% 不就行了，height:100% 也不妨碍 overflow 溢出到 body ，还能让子容器继承和分配。 |
Select Language