How to make absolute element automaticaly resize with parent heigh?

user_8614088 0
Viewed 37

I'm having hard time trying to solve this problem :( I'm developing a React application to train myself.

The basic structure of my application looks like this :

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

All of these components have a css attribute min-heigh: 100vh to make sure that they all takes the device heigh.

Inside one of these components, I have an element in absolute position with the css attribute heigh: 100%.

When the parent composant of this element, by default, is at 100vh heigh, nothing is wrong, the absolute child element is taking all of his parent heigh.

But the problem is that when the parent have a lot of contents to display and its heigh is more than 100vh (150vh for example) due to the min-heigh: 100vh attribute, then the absolute child heigh stuck at 100vh.

After several hours of researchs and attempts, I'm hoping someone there will help me .. Sorry for my poor english skill, I hope it's understandable

Mecadie

EDIT https://antoine-regembal-portfolio.netlify.com Here is the webapplication hosted on Netlify, the absolute element is the github panel located on the Projects section (on the right)

absolute css styles
3 Answers

There are two things at play here:

  1. Setting height: 100% on the child container constrains it to however tall the first parent container with position: relative is, in this case I'm assuming your min-height: 100vh parent container. Per @focus.style's answer, top: 0; bottom: 0; will have the exact same behavior, because of the second point:

  2. Because your child container is absolutely positioned, it is taken out of the document flow. This means that, if your child container content exceeds the height of the parent container, it won't increase the height of the parent container.

The combination of these two things is what's causing your child to remain at 100vh height.

If all you want is for your child to expand in height, try min-height: 100% instead of height: 100% on the child element. However, point 2 above still holds, so the parent container will not expand. To make the parent container expand, you'd have to keep your child in the document flow.

Here's a quick Codepen demonstration: https://codepen.io/samsonzhangthesalmon/pen/rNVPxrj

user_45175860

Instead of using heigh: 100% for child element with absolute positioning, try to use 

top: 0px; 
bottom: 0px;

But it is too few information to deal with in your example. Need some more code.

Or try this

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

Here is the solution that worked for me, given by focus.style

Oh. And did you try to make it's parent element position: relative; ? It's the most important step. –

user_86140880
Related