Scrolling of whole page instead of inner div only

I'm fiddling with CSS again again...

http://www.kebax.dk/test.php

As you see, the container called map is scrolling independently of the rest of the container. How can I make the whole page scroll when more content is placed in the content?

I have tried using the overflow attribute, but without luck...

EDIT for future references:

        body {
            background:#000000;
            margin:0;
            padding:0;
            overflow:scroll;
            overflow-x:hidden;
        }

        #container{
            position: relative;
            height: 100%;
            width: 950px;;
            background: yellow;
            margin-left:auto;
            margin-right:auto;
            overflow:auto;
        }

        #map {
            position:absolute;
            top:80px;
            bottom:0;
            left:0;
            right:0;
            background:#fff;
            overflow:auto;
            overflow-x:hidden;
        }

        #header {
            heig开发者_开发技巧ht:80px;
            width:900px;
            background:#333;
            margin:0;
            padding:0;
        }
        #header h1 {
            color:#fff;
            margin:0;
            padding:0;
        }

        #leftgradient {
            width:50px;
            height:80px;
            float:left;
            background:#096;
            background: -webkit-gradient(linear, left top, right top, from(#000000), to(#333333));
        }

        #rightgradient {
            width:50px;
            height:80px;
            float:right;
            background:#096;
            background: -webkit-gradient(linear, left top, right top, from(#333333), to(#000000));
        }

        #toppanel {
            background:#179AE8;
            width:950px;
            height:50px;
        }

        #leftpanel {
            background:#179AE8;
            width:100px;
            height:250px;
            float:left;
        }

        #content {
            background:#099;
            width:850px;
            margin-left:100px;
        }



<div id="container">
    <div id="leftgradient"></div>
    <div id="rightgradient"></div>
    <div id="header">
        <header>    
            <h1>
                Heading
            </h1>
        </header>
    </div>

    <div id="map">
        <div id="toppanel">
            top
        </div>
        <div id="leftpanel">
            lefty
        </div>
        <div id="content">
            Lots of text!!
        </div>
    </div>
</div>

If I understand correctly, you just need to remove a boatload of CSS declarations:

• On body, remove: overflow: hidden.
• On #container, remove: height: 100%, overflow: auto, position: relative.
• On #map, remove:
  • position: absolute, left: 0, bottom: 0, right: 0, top: 80px
  • overflow-x: hidden, overflow-y: auto.

Now you can scroll the page (tested in Firefox only).

Removing all that stuff possibly broke some certain functionality on your page. Let me know if there is anything, and we can see about finding another way to add back in this missing functionality.

To fix the issue in the comments, add:

• html, body { height: 100% }
• On #container, add min-height: 100%.

Now, you can see the yellow background poking out on #container. A way to fix this would be to change that yellow to white, and then use a background image exactly like this:

On #container:

background: #fff url(http://i.stack.imgur.com/q1Sp1.png) repeat-y

You also need to remove the white background-color from #map.

overflow: scroll; :) give that a whirl