Search code examples
cssscrolloverflowpositioning

Tricky CSS scroll length

<div class="container1"></div>
<div class="container2"><div class="container2-inner"></div></div>

.container1 { height: 5000px; }
.container2 { height: 100%; width: 100%; position:absolute; }
.container2-inner { height: 1000px; margin: 0 auto; }

.container2-inner height varies depending on content inside (.container2 is overlay popup window).

Currently the vertical browser scroll is always 5000px no matter what OR more if .container2-inner exceeds 5000px. I'd like scroll to be only 1000px when popup window is active but I still want to keep 5000px high .container1 below. How do I achieve that?

Solution

  • Not sure I understand your problem either based on your description but maybe something like...

    CSS

    HTML, BODY {padding:0;margin:0;}
.container1 {height:5000px;background:red;}
.container2 {height:100%;width:100%;position:absolute;top:0;left:0;background:green}
.container2-inner {height:1000px;width:400px;overflow-x:hidden;overflow-y:scroll; margin:0 auto;background:yellow}

    HTML

    <div class="container1"></div>
<div class="container2">
    <div class="container2-inner">
    Start Here<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    End Here
    </div>
</div>

    You can see the results at http://dabblet.com/gist/2876726