Question

在目前的形式中，下面的CSS不允许我的页面滚动。但是，如果我禁用下面的CSS代码，页面允许滚动。我已经尝试反复设置overflow属性，使用height: 130%可以让我看到滚动条，但页面实际上仍然没有滚动。

这是显示我的问题的JSFiddle。

h1{
color: #FFF;
}

h3{
font-size: 25px;
    color: #990000;
    text-decoration: none;
    font-family: 'Chivo';
}

h5 {
    color: #bb0000;
    text-decoration: none;
    font-family: 'Chivo';
    font-size: 40px;
    line-height: 1em;
    font-weight: bold;

    }

h5:focus {
    outline: thin dotted rgb(51, 51, 51);
        outline-width: thin;
        outline-style: dotted;
        outline-color: rgb(51, 51, 51);
    outline-offset: -2px;
}

h5:hover, a:active {
text-decoration: underline;
color: #990000;
outline: 0;
outline-color: initial;
outline-style: initial;
outline-width: 0px;
}

/*box!*/

#boxdrop{
box-shadow: 0px 0px 10px grey;
position:fixed;
background-attachment:scroll;
left:10px;
}
#boxdrop2{box-shadow: 0px 0px 10px grey;}

.boxbg { background-color:#ccc;background-attachment:scroll; }
.boxbg2 { background-color:#ddd; background-attachment:scroll;}
.boxbg3 { background-color:#eee;background-attachment:scroll;}
.all-round {
border-radius:1em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
}

Answer 1

如果您想要回滚，请从您的boxdrop div中删除position:fixed。

#boxdrop{
box-shadow: 0px 0px 10px grey;
background-attachment:scroll;
left:10px;
}

<强> jsFiddle example

Answer 2

我认为问题在于您的HTML。您有两个div，其ID为boxdrop2。此外，标识为div的{{1}}具有boxdrop属性，因此position:fixed无法以任何方式滚动。无论何时使用fixed，都可以消除任何滚动的可能性，因为固定元素会在页面中留下元素流。

CSS不允许滚动

2 个答案: