如何使绝对元素自动调整父高度？答案

【问题标题】：How to make absolute element automaticaly resize with parent heigh?如何使绝对元素自动调整父高度？
【发布时间】：2020-03-30 04:17:05
【问题描述】：

我很难解决这个问题:( 我正在开发一个 React 应用程序来训练自己。

我的应用程序的基本结构如下所示：

<body>
 <Component />
 <AnotherComponent />
 <AgainAnotherComponent />
 ...
</body>

所有这些组件都有一个 css 属性 min-heigh: 100vh 以确保它们都占据设备高度。

在其中一个组件中，我在absolute 位置有一个元素，其css 属性为heigh: 100%。

当这个元素的父组件默认为100vh 高度时，没有任何问题，绝对子元素占据了他所有的父高度。

但问题是当父级有很多内容要显示并且由于min-heigh: 100vh属性，其高度more比100vh（例如150vh），那么孩子的绝对身高停留在100vh。

经过几个小时的研究和尝试，我希望有人能帮助我.. 对不起，我的英语水平很差，我希望它可以理解

麦卡迪

编辑 https://antoine-regembal-portfolio.netlify.com 这是 Netlify 上托管的 Web 应用程序，绝对元素是位于 Projects 部分（右侧）的 github 面板

【问题讨论】：

【解决方案1】：

这里有两件事在起作用：

在子容器上设置 height: 100% 会将其限制为带有 position: relative 的第一个父容器有多高，在这种情况下，我假设您的 min-height: 100vh 父容器。根据@focus.style 的回答，top: 0; bottom: 0; 将具有完全相同的行为，因为第二点：
因为您的子容器是绝对定位的，所以它被从文档流中取出。这意味着，如果您的子容器内容超过父容器的高度，它不会增加父容器的高度。

这两件事的结合是导致您的孩子保持在 100vh 高度的原因。

如果您只想让孩子增加高度，请在子元素上尝试min-height: 100% 而不是height: 100%。但是，上面的第 2 点仍然成立，因此父容器不会展开。要使父容器展开，您必须将您的子容器保留在文档流中。

【讨论】：

【解决方案2】：

对于具有绝对定位的子元素，不要使用 heigh: 100%，而是尝试使用

top: 0px; 
bottom: 0px;

但是在您的示例中处理的信息太少。需要更多代码。

或者试试这个

.presentation, .projects {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #fff;
    position: relative;
}

【讨论】：

嗨，我试过这个技巧，但是绝对元素被移动到页面的顶部，这里是 webapp 让你看看有什么问题antoine-regembal-portfolio.netlify.com
哦。您是否尝试使其成为父元素位置：相对； ?这是最重要的一步。
哦，伙计……这就是解决方案……我以为position: relative是默认设置的……找到解决方案就是这么简单！非常感谢！
编辑了一个答案，以便您将其标记为正确的

【解决方案3】：

这是对我有用的解决方案，由 focus.style 给出

哦。您是否尝试使其成为父元素位置：相对； ?这是最重要的一步。 ——

【讨论】：