Problem with div that has position relative

Question

I have a div that has position: relative , and placed it somewhere at the bottom center of the page. It has height and width being set . My problem is that, the height of that div is big enough that only half of it is being displayed on the page. My expectation at first is that, a vertical scroll bar will show up since the size " overflows the default size (height) of the body ". But I was wrong. I think when I make its (div) position to relative, I detach it from the space reserved on the body thus the body can only see its original space being occupied. And when I moved it at the bottom center part of the page, the body can only see its original space being occupied ( before the div was moved ), that's why there's no vertical scroll bar displayed to indicate that there are still contents to be displayed.

Now, how can I make, or is there even a way to make the body track where that div is being placed. So if that div is placed somewhere near at the edge of the page, and its height or width is big enough to expand the size of the container, it should show a scroll bar to indicate that there are more contents to display.

This is how it currently looked like: Sample

That " Recent Activities " div has been positioned relatively and placed at bottom center of the page. I put a border so we can see that the bottom border was not seen, and the div looks like being cut when it shouldn't be.

Answer 1

OK. So, I know this is a hard thing to explain... but I'm guessing that you're positioning the div for activity - something like position: relative - and then also top: 672px

relative positioning works by changing the position - 'relative' to its natural place in the flow. It also has the added effect of creating a positioning boundary for children that are positioned absolutely. But it's not going to add page height or be tracked by scroll etc. It's still where it started... you've just visually moved how the box is being displayed. What are you using it for? You can likely accomplish what you want - without relative positioning.

To get closer to being able to answer you, here is an example of how I would write the layout you showed. (simplified)

If you take a look at this jsFiddle ( https://jsfiddle.net/sheriffderek/ny5hfa67 ) - maybe you can amend it to show your issue.

Here's a resource to get the most out of your questions: https://stackoverflow.com/help/how-to-ask

 .overview { border: 1px solid red; display: flex; flex-direction: row; justify-content: space-between; } .overview .area { border: 1px solid blue; flex-basis: 50%; padding: 1rem; } .activity { position: relative; /* so what? */ border: 1px solid green; } .activity .activity-list { border: 1px solid orange; } .activity-list .link { display: block; padding: 1rem; }

 <section class='overview'> <aside class='area attendance'> attendance </aside> <aside class='area payments'> payments </aside> </section> <section class='activity'> <aside class="activity-list"> <ul class="item-list"> <li class="item"> <a class="link">item</a> </li> <li class="item"> <a class="link">item</a> </li> </ul> </aside> </section>