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来集中我的背景。离开这个以防将来帮助某人。

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

1 个答案: