为什么我的页面无法滚动？答案

【问题标题】：Why is my page not scrollable?为什么我的页面无法滚动？
【发布时间】：2012-09-25 01:55:48
【问题描述】：

所以我制作了几个使用以下css代码的页面：

html { overflow-y: scroll; }
    ul.navbar {
    list-style-type: none;
    position: fixed;
    top: 00px;
    left: 00px;
    width: 200px;
    height: 700px; 

    background-image:url('/images/B_left-background.png');
}

ul.header {
    position: fixed;
    top: -20px;
    left: 240px;
    height: 100px;
    width:700px;
    background-image:url('/images/B_left-top.png');
}

body {

    position: fixed;
    top: 100px;
    left: 300px;

    font-family: Georgia, "Times New Roman",
        Times, serif;

    background-color: #D6E9B4;
}
div.scrollableContainer {
    background: none repeat scroll 0 0 ;
    border: 1px solid #999999;
    height: 400px;
    margin: 40px;
    overflow: auto;
    width: 800px;
}
h1 {font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar a {text-decoration: none }

a.send{
    color: black;
    background-image:url('/images/send-message-bt.png');
    position:fixed;
    top:200px;
    left:0px;
    height:80px;
    width:290px;
}

a.token{
    color: black;
    background-image:url('/images/token-ID-bt.png');
    position:fixed;
    top:300px;
    left:0px;
    height:80px;
    width:290px;
}

a.history{
    color: black;
    background-image:url('/images/history-bt.png');
    position:fixed;
    top:400px;
    left:0px;
    height:80px;
    width:290px;
}

a.comp{
    background-image:url('/images/competition-bt.png');
    position:fixed;
    top:500px;
    left:0px;
    height:80px;
    width:290px;
}

a.out{
    background-image:url('/images/B_log-out-bt.png');
    position:fixed;
    top:600px;
    left:50px;
    height:60px;
    width:160px;
}

我想让整个页面可以滚动，这样如果有人在低分辨率设备上仍然可以向下滚动。如您所见，我输入了： html {溢出-y：滚动； } 但这无济于事。

有什么办法可以解决这个问题吗？和我设置固定高度有关系吗？

【问题讨论】：

是你所有的固定位置导致了这个问题，那个页面不知道它有多长，因此为什么你从来没有滚动条，尝试将它更改为相对或绝对，看看是否有任何区别
@Reina: absolute 在这种情况下并不比固定好，因为两者都将元素从文档的正常流程中取出。
谢谢 reina，我想你可能是对的。知道我该怎么做吗？

标签： html css scrollable

【解决方案1】：

试试这个：

html { overflow-y: scroll; }
body { position: absolute; }

或者这个：

html { overflow-y: scroll; overflow-x:hidden; }
body { position: absolute; }

【讨论】：

【解决方案2】：

溢出-y：滚动；到正文和 html

html,body{overflow-y: scroll; }

【讨论】：

【解决方案3】：

对我来说有一个：

overflow-y: hidden;

在 body 的第一个孩子的 css 中，阻止页面变得可滚动。一旦我删除它，页面就会滚动。

【讨论】：