网页是 SPA
祖先元素样式:min-height:100%
这样,PC 下大部分场景,可以刚好拉伸主要部分占满屏幕; mobile 大部分场景下,祖先元素自动超出 100%的高度
这点之前一直工作得很好
但特例出现了
一个场景,需要祖先元素高度刚好 100%,不能再多,也不能更少
如果子元素内容太少,填充高度,不能减少祖先元素的高度
如果子元素内容太多,展示垂直滚动条,不能增加祖先元素的高度
chatgpt 和 claude 给的方案:flex-grow: 1; overflow-y: auto;。实际试过了,不行。其中一个例子放下面了,大家可以试着改下
也想到了两个可行方案:
- 当需要这个特例时,发个事件通知祖先元素加上: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>
|