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;
}
也许关于我如何使用绝对定位?我一直在学习codeacademy的CSS,并从别人的主题开始(完全相信)有一个修补程序,所以我认为我通过不理解它的存在而打破了一件事情。 – Unmutual
您是否尝试从主题中删除'overflow-y:scroll'来查看会发生什么? – Brian
我认为这是我加入的尝试和解决问题的方法,而不是造成问题的原因。 – Unmutual