How do you use CSS to absolutely place objects partially off the screen without vertical scroll bars?

Question

I have a container object with height = 100vh and I want to place a decorative object inside it so that the bottom half of it extends beyond the bottom of the browser window, but when I do so with absolute positioning, vertical scroll bars appear, allowing you to scroll to the bottom of the object. How do I avoid this?

Answer 1

You could try using the overflow property on the container object to clip the content and hide it without displaying scroll bars.

Here's an example of how you could use the overflow property:

.container{
    height: 100vh;
    overflow: hidden;
}

You can learn more about this property from these sources:

overflow - CSS: Cascading Style Sheets | MDN

CSS Layout - Overflow - W3 Schools

I hope this answers your question. If you have any other issues, feel free to ask! I will do my best to answer