javascript - 如何使父容器的高度设置为固定 px 高度和子内容高度之间的最大值?
问题描述
如何让父容器满足以下条件:
- 最大高度为 80vh
- 具有以下最大值之间的高度:a)400px(或任何固定高度)b)子内容的高度
- 子内容不能超出父容器
- 当子内容增长时,它们会继续增长,直到达到父级的最大高度 80%(然后滚动)
我已经有了 1、3 和 4 的逻辑。但我不确定如何实现第二个条件。这是我写的一些示例代码:
.parent {
height: 400px;
width: 80%;
margin: 100px auto;
max-height: 80vh;
border: solid 5px black;
overflow: scroll;
}
.child {
border: solid 5px red;
width: auto;
height: 550px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
我想我正在寻找类似高度的东西:max(400px,max-content)。但这是可能的/我将如何实现这一点?任何想法将不胜感激!
解决方案
来自MDN:
最大高度覆盖高度,但最小高度覆盖最大高度。
因此,为了确保您的条件 1 始终满足(最大高度为 80vh),您不仅需要将 max-height 设置为该值,而且还必须确保如果 400px 大于 80vh,则高度不会超过 80vh,否则它将达到 400px 并推翻 80vh 的最大高度。
max-height: 80vh;
min-height: min(400px, 80vh);
推荐阅读
- django - 如何在 Vuejs 项目中实现 Agora 上的视频录制功能?
- artifactory - 多个 Artifactory 存储库的公共工件是否只存储一次?
- python - 尝试通过 python 获取电子邮件
- html - 延迟加载子组件
- sql-server-2008 - 多语句表值函数问题
- javascript - JS Grocerylist / 项目为空
- reactjs - React:当类的状态改变时防止自动刷新
- python - 我可以在 python 中使用 444RGB 或 555RGB 吗?
- logstash - 如何在logstash中转换格式“yyyy-MM-dd HH:mm:ss
- java - Selenium 动作多线程