2015-05-21 3 views
0

Я делаю причудливую тему CSS для моего tumblr. Но моя вертикальная полоса прокрутки исчезла, и нажатие «вниз страницы» не влияет. Это похоже на то, что нижняя половина моей страницы больше не существует, или страница вынуждена быть размером моего окна браузера. В самом деле, если я изменил размер окна браузера, я вдруг увижу этот объем контента и не могу прокрутить вниз, чтобы увидеть материал, который я мог видеть некоторое время назад.Вертикальная полоса прокрутки, не работающая в CSS

Я уже кое-что прочитал в Интернете, чтобы решить эту проблему, например, добавить «переполнение: авто» или «переполнение: прокрутка», но либо я добавил их не в том месте, либо не решил проблема у меня есть. Я также попытался вручную добавить прокрутку в тег 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

Возможно, что-то о том, как я использовал абсолютное позиционирование? Я изучаю CSS вне кодекса и начинаю с чужой темы (полностью зачисленной), чтобы иметь возиться, поэтому я думаю, что я сломал вещь, не понимая, для чего это было. – Unmutual

+0

Вы пытались удалить 'overflow-y: scroll' из своей темы, чтобы узнать, что произойдет? – Brian

+0

Я думаю, что это то, что я добавил, чтобы попытаться исправить проблему, а не то, что ее вызывает. – Unmutual

ответ

0

Alrighty, поэтому мне удалось исправить ситуацию, взяв по одному элементу за раз. Проблема была в

container {position:fixed;} 

но я не уверен, почему. Я использовал position:fixed в центре моего фона. Оставляя это в случае, если это поможет кому-то в будущем.

Смежные вопросы