2015-05-21 46 views
0

我正在为我的tumblr制作一个花哨的CSS主题。但是我的垂直滚动条消失了,按下“下一页”不起作用。这就像我的网页的下半部分不再存在,或者页面被强制为我浏览器窗口的大小。事实上 - 如果我调整浏览器窗口的大小,突然间我会看到大量的内容,并且无法向下滚动查看我刚才可以看到的内容。垂直滚动条不能在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; 
} 
+0

也许关于我如何使用绝对定位?我一直在学习codeacademy的CSS,并从别人的主题开始(完全相信)有一个修补程序,所以我认为我通过不理解它的存在而打破了一件事情。 – Unmutual

+0

您是否尝试从主题中删除'overflow-y:scroll'来查看会发生什么? – Brian

+0

我认为这是我加入的尝试和解决问题的方法,而不是造成问题的原因。 – Unmutual

回答

0

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

container {position:fixed;} 

但我不知道为什么。我使用position:fixed来居中我的背景。离开这个以防将来帮助别人。