Relative positioned div inside of fixed parent

Question

I need relative positioned div inside of fixed parent.

I have a website where everything is relative exept fixed popup window which opens on a button click. This popup window should be 100% width and 100% height, so it covers whole page.

Inside popup window I want fixed div on left side which is 60% width, and relative div on right side (40% width, auto height) which is available to scroll.

In fact, it's hard to explain so I made the fiddle. In this example, I want to scroll orange div instead of scrolling blue div. Is it possible to change scrollbar focus?

<div id='container'> <div id='inside-fixed-div'> <div id='left-fixed-container'></div> <div id='right-relative-container'> </div> </div> </div>

https://jsfiddle.net/87x8dwn6/

Andy Hoffman · Accepted Answer · 2016-04-24 02:50:54Z

To remove the scroll on the blue, I needed to remove the 1200px height set on the #container and replace that value with 100%. The 100% height won't work unless the parent is also 100% height. Because of this, the parents needing this 100% height would be the document root and body.

html, body { margin: 0; height: 100%; } #container{ ... height: 100%; }

In addition, I set overflow to auto and height to 100% on #right-relative-container.

#right-relative-container{ ... height: 100%; overflow: auto; ... }

Result (quality of gif isn't great — apologies)

Demo http://codepen.io/antibland/pen/eZjxom

Just curious what software are you using to record that on your Mac? (I use Techsmith Snagit on my Chromebook, but I'd like to know what you're using because the quality is better)

Collectives™ on Stack Overflow

Relative positioned div inside of fixed parent

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related