Home/ Questions/Q 9254097
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T11:22:54+00:00

I have two containers. The bottommost one creates a scrollbar because it has a

  • 0

I have two containers. The bottommost one creates a scrollbar because it has a height that is large enough to need that. When the topmost container is visible above the bottommost container id like the scrollbar to work for ONLY that container. Right now scrolling affects the bottom and top containers. How do you go about doing this? Thank you!

Here is the code for what is happening:
http://jsfiddle.net/5wNDX/68/

CSS:

#outer {
background-color: rgba(255, 255, 255, 0);
bottom: 0px;
color: rgb(51, 51, 51);
display: block;
font-size: 14px;
height: 563px;
left: 0px;
overflow-x: auto;
overflow-y: scroll;
position: fixed;
right: 0px;
top: 0px;
width: 1479px;
z-index: 9999;
}

#inner {
background-color: rgb(255, 255, 255);
border:4px solid #000;
color: rgb(51, 51, 51);
display: block;
font-size: 14px;
height: 900px;
margin:0 auto;
overflow-x: hidden;
overflow-y: hidden;
position: static;
width: 750px;
z-index: auto;
}

HTML:

<body> 
    <div>Large block of text</div>
    <div id='outer'>   
      <div id='inner'>
        test
      </div>   
    </div>
  </body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You may need to give position: absolute to your #inner div to accomplish this.

    • 0