我很难解决这个问题：(我正在开发一个React应用程序来训练自己。
我的应用程序的基本结构如下：
<body>
<Component />
<AnotherComponent />
<AgainAnotherComponent />
...
</body>
所有这些组件都有一个css属性min-heigh: 100vh，以确保它们都具有设备高度。
在其中一个组件中，我在absolute位置有一个css属性为heigh: 100%的元素。
默认情况下，当该元素的父组件处于100vh高度时，没有任何问题，绝对子元素将占用其所有父组件高度。
但问题是，当父对象有很多内容要显示，并且由于min-heigh: 100vh属性，其高度比100vh(例如150vh(大时，则绝对子对象高度停留在100vh。
经过几个小时的研究和尝试，我希望那里有人能帮助我。。很抱歉我的英语能力不好，我希望可以理解
Mecadie
编辑https://antoine-regembal-portfolio.netlify.com这是Netlify上托管的网络应用程序，绝对元素是位于项目部分(右侧(上的github面板
这里有两件事在起作用：
-
在子容器上设置
height: 100%会将其限制为具有position: relative的第一个父容器的高度，在这种情况下，我假设您的min-height: 100vh父容器。根据@focus.style的回答，top: 0; bottom: 0;将具有完全相同的行为，因为第二点： -
因为您的子容器是绝对定位的，所以它会从文档流中取出。这意味着，如果子容器内容超过父容器的高度，则不会增加父容器的身高。
这两件事的结合导致你的孩子保持100vh的高度。
如果您只想让孩子的身高扩大，请在子元素上尝试min-height: 100%而不是height: 100%。但是，上面的第2点仍然有效，因此父容器不会展开。要使父容器展开，您必须将子容器保留在文档流中。
以下是Codepen的快速演示：https://codepen.io/samsonzhangthesalmon/pen/rNVPxrj
对于具有绝对定位的子元素，不要使用高度：100%，而是尝试使用
top: 0px;
bottom: 0px;
但是在您的示例中，要处理的信息太少了。需要更多的代码。
或者试试这个
.presentation, .projects {
min-height: 100vh;
display: flex;
flex-direction: column;
color: #fff;
position: relative;
}
以下是focus.style 提供的对我有效的解决方案
哦。你有没有试着让它的父元素位置：相对？这是最重要的一步