css - 垂直滚动条在 CSS 中不起作用

Question

我正在为我的 tumblr 制作一个漂亮的 CSS 主题。但是我的垂直滚动条消失了，按“向下翻页”也没有效果。这就像我的页面的下半部分不再存在，或者页面被强制为我的浏览器窗口的大小。事实上 - 如果我调整浏览器窗口的大小，我突然看到那么多内容，并且无法向下滚动以查看我刚才可以看到的内容。

我已经在互联网上阅读了一些解决这个问题的东西，比如添加“overflow:auto”或“overflow:scroll”，但是要么我把它们添加在错误的地方，要么它们没有解决问题我有。我也试过在 html {} 标签中手动添加滚动条。如果我这样做，滚动条会重新出现 - 但它实际上不起作用。它看起来全部被灰色遮挡，就好像您已经在查看整个页面，同时显示我的内容被截断。

除此之外，页面已经完成，非常沮丧。有什么明显的想法吗？

<!--CSS customization here. -->

<style type="text/css">

html {overflow-y: scroll;}
#text {
margin-bottom:50px;
margin-top:100px;
margin-top:5px;
text-transform:uppercase;
font-size:1em;
font-famiy:serif;
letter-spacing:2px;
text-align:center;}


/*main structure*/
blockquote {
padding:5px 0 5px 30px;
border-left:1px solid #eee;
margin:10px 30px;
overflow: auto;
}

body {
background-repeat:repeat-y;
background-size: cover;
font-family:serif;
font-weight:100;
font-size:1em;
text-align:left;
margin:0;
line-height:18px;
overflow:auto;
}

a {
color:black;
text-decoration:none;
    -webkit-transition:all 0.2s;
    -moz-transition:all 0.2s;
    -ms-transition:all 0.2s;
    -o-transition:all 0.2s;
    transition:all 0.2s; }
a:hover {
color:#45b69d;
}

img{
border:1px solid #fff;
border-radius:6px;
}

p {
margin-top:5px;
margin-bottom:5px}


#divider{
top:25px;
left:305px;
position:fixed;
width:420px;
position:absolute;
}

#dividerr{
bottom:20px;
left:37px;
width:420px;
position:fixed;
}

/*container*/
#con {
width:80%;
margin:0 10%;
position:fixed;
overflow:auto;
}



/*posts*/

.posts {
width:45%;
height:300px;
padding:4px;
background:white;
float:left;
margin:20px 20px;
border:1px solid #ffcec7;
border-radius:6px;
z-index:3;
}

#image {
position:absolute;
padding-top:8px;
padding-left:5px;
margin-right:5px;
}

#image img {
width:190px;
border:1px solid #fff;
border-radius:6px;
margin-right:8px;
}

.info {
margin-left:205px;
width:65%;
text-transform:none;
}

.tit {
font-weight:bold;
text-align:right;
font-family:georgia;
color:#ffa79b;
font-size:1.5em;
letter-spacing:1px;
text-transform:uppercase;
}

.lank {
border-bottom:1px dashed #ffcec7;
margin-bottom:5px;
padding-bottom:5px;}

.about ul {margin-left:-10px}

.quest {
    font-size:1.25em;
    font-family:Helvetica;
    font-variant:small-caps;
}

.answ {
    margin-top:10px;
    margin-left:40px;
    font-family:Georgia;

}

.grave {
    text-align:center;
    font-weight:bold;
    margin-top:10px;
    font-family:georgia;
    font-size:1.5em;
    letter-spacing:1px;
    font-style:italic;
    color:#cdba96;
}


.credit {
width:45%;
height:auto;
padding:4px;
background:white;
float:left;
margin:20px 20px;
border:1px solid #ffcec7;
border-radius:6px;
z-index:3;
} 
/*header*/

.headertext {
color:beige;
font-size:6em;
letter-spacing:1em;
text-align:center;
font-family:Helvetica,sans-serif;
line-height: 80%;
height: auto;
}

.l {
background:#fff;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding:2px;
text-align:center;
font-family:inconsolata;
text-transform:uppercase;
border:1px solid #ffcec7;
border-radius:6px;
}

#title {
width:50%
font-size:14px;
margin:auto 0;
text-align:center;
letter-spacing:1px;
text-transform:uppercase;
color:#ffcec7;
background:#f8f8f8;
padding:15px;
border-bottom:1px solid #eee;}

.links {
color:#ffa79b;
font-family:georgia;
padding-top:10px;
text-align:center;
padding-bottom:5px;
border-bottom:1px dashed #ffcec7;
}

.links a {
margin:10px 5px;
padding:2px 5px;
border:none;
}

.links a:hover {
background:#f8f8f8;
border-radius:6px;
}

.desc {
text-transform:none;
margin:10px 25px;
font-family:Georgia;
}

Answer 1

好吧，所以我设法通过一次取一个元素来解决这个问题。问题出在

container {position:fixed;}

但我不确定为什么。我正在使用 position:fixed 来居中我的背景。留下这个以防将来对某人有帮助。