Question 199206 in CSS Question posted in
Some basic documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    To avoid the appearance of vertical scrollbars when using absolute positioning for a decorative object that extends beyond the bottom half of a container with a height of 100vh, you can make use of the CSS overflow property. Here’s an example of how you can achieve this:

    HTML:

    <div class="container">
<div class="decorative-object"></div>
</div>

    CSS:

    .container {
position: relative;
height: 100vh;
overflow: hidden; /* Hide the vertical 
scrollbars */
}

.decorative-object {
position: absolute;
bottom: -50%; /* Adjust this value as 
needed */
left: 0;
width: 100%;
height: 200%; /* Extend the height 
beyond the container */
background-color: #f0f0f0; /* Example 
background color */
}

    In this example, the .container element has a position of relative and a height of 100vh. To prevent the vertical scrollbars from appearing, the overflow property is set to hidden, which hides any content that overflows beyond the container’s boundaries.

    The .decorative-object element is positioned absolutely within the container. By setting bottom: -50%, the bottom half of the decorative object extends beyond the bottom of the browser window. Adjust this value as needed to achieve the desired visual effect.

    Additionally, the height of the .decorative-object element is set to 200%, allowing it to extend beyond the container’s height and create the desired decorative effect.

    With this approach, the vertical scrollbars should be hidden, and users won’t be able to scroll to the bottom of the decorative object.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search