仅滚动整页而不是内部div

Question

我又在再次摆弄CSS ......

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

如您所见，名为map的容器正在独立于container的其余部分滚动。如何在content？

中放置更多内容时如何滚动整页？

我尝试过使用overflow属性，但没有运气......

编辑以供将来参考：

        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 {
            height: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>

Answer 1

如果我理解正确，您只需删除CSS声明的 boatload ：

• 点击body，删除：overflow: hidden。
• 点击#container，删除：height: 100%，overflow: auto，position: relative。
• 在#map上，删除：
  • position: absolute，left: 0，bottom: 0，right: 0，top: 80px
  • overflow-x: hidden，overflow-y: auto。

现在您可以滚动页面（仅在Firefox中测试）。

删除所有内容可能会破坏页面上的某些功能。让我知道是否有什么，我们可以看到找到另一种方法来补充这个缺失的功能。

---

要在评论中解决问题，请添加：

• html, body { height: 100% }
• 在#container上，添加min-height: 100%。

现在，您可以在#container上看到黄色背景。修复此问题的方法是将黄色更改为白色，然后使用与此完全相同的背景图像：

（保存并使用它）

在#container：

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

您还需要从background-color删除白色#map。

Answer 2

overflow: scroll; :)给那个旋转