Полоса прокрутки браузера не отображается

У меня проблема, когда панель прокрутки браузера не появляется, когда мой веб-контент выходит за пределы окна браузера. Я уверен, что проблема находится в контейнере div, а не в нижнем колонтитуле, так как удаление нижнего колонтитула ничего не меняет. Какие-либо предложения?Полоса прокрутки браузера не отображается

Вот часть html.

<html> 
<head> 
    <link rel ="stylesheet" type="text/css" href="style.css"></link> 
    <style> 
    body {background-color:#64B6B1;} 
    </style> 
</head> 
<body> 
<div id="container"> 
    <div class="box"> 
    </div> 
    <div class="box"> 
</div> 
<div class="box"> 
</div> 
<div class="box"> 
</div> 
<div class="box"> 
</div> 
</div> 
<div id="footer"> 
<div class="icon"><h2>AB</h2></div> 
<ul> 
<li><a href="webdesign.html"><div class="webdesign" style="background-color:#64B6B1;width:25px;height:25px;"></div></a></li> 
<li><a href="graphicdesign.html"><div class="graphic"></div></a></li> 
<li><a href="about.html"><div class="about"></div></a></li> 
<li><a href="index.html"><div class="home"></div></a></li> 
</ul> 
</div> 
</body> 
</html>

Вот часть CSS.

@charset "utf-8"; 

html {height:100%;} 

body { 
font-family:Arial Narrow, sans-serif; 
color:#FFFFFF; 
text-align:right; 
height:100%; 
overflow:hidden; 
} 

h1 {font-family:Arial, sans-serif;} 

.box { 
width:390px; 
height:300px; 
float:left; 
background-color:#CCCCCC; 
} 

#container { 
position:absolute; 
width:80%; 
min-width:780px; 
top:10%; right:0; left:0; 
margin: auto; 
padding:5px; 
background-color:#000000; 
} 

/* FOOTER */ 

#footer { 
width:100%; 
height:50px; 
position:fixed; 
bottom:0; 
right:0; 
z-index:10; 
overflow:hidden; 
background-color:#FFFFFF; 
} 

ul { 
list-style-type:none; 
float:right; 
margin:0; 
padding:15px; 
} 

li { 
display:inline; 
float:right; 
padding-left:10px; 
} 

div.home { 
-moz-border-radius:50px/50px; 
-webkit-border-radius:50px/50px; 
border-radius:50px/50px; 
background-color:#46433A; 
width:20px; 
height:20px; 
transition:width 1s, height 1s, background-color 1s; 
-webkit-transition:width 1s, height 1s, background-color 1s; 
} 

div.home:hover { 
width:25px; 
height:25px; 
background-color:#8AB688; 
} 

div.about { 
-moz-border-radius:50px/50px; 
-webkit-border-radius:50px/50px; 
border-radius:50px/50px; 
background-color:#46433A; 
width:20px; 
height:20px; 
transition:width 1s, height 1s, background-color 1s; 
-webkit-transition:width 1s, height 1s, background-color 1s; 
} 

div.about:hover { 
width:25px; 
height:25px; 
background-color:#DED4B9; 
} 

div.webdesign { 
-moz-border-radius:50px/50px; 
-webkit-border-radius:50px/50px; 
border-radius:50px/50px; 
background-color:#46433A; 
width:20px; 
height:20px; 
transition:width 1s, height 1s, background-color 1s; 
-webkit-transition:width 1s, height 1s, background-color 1s; 
} 

div.webdesign:hover { 
width:25px; 
height:25px; 
background-color:#64B6B1; 
} 

div.graphic { 
-moz-border-radius:50px/50px; 
-webkit-border-radius:50px/50px; 
border-radius:50px/50px; 
background-color:#46433A; 
width:20px; 
height:20px; 
transition:width 1s, height 1s, background-color 1s; 
-webkit-transition:width 1s, height 1s, background-color 1s; 
} 

div.graphic:hover { 
width:25px; 
height:25px; 
background-color:#CE534D; 
} 

div.icon { 
-moz-border-radius:50px/50px; 
-webkit-border-radius:50px/50px; 
border-radius:50px/50px; 
background-color: #FFFFFF; 
width:35px; 
height:35px; 
float:left; 
margin-left: 5px; 
margin-top: 4px; 
border-style:double; 
border-color:#46433A; 
} 

h2 { 
font-size:18px; 
font-family:Arial Narrow,sans-serif; 
color:#46433A; 
margin-top:7px; 
margin-right:6px; 
}

источник

2013-07-31 Anonymous

EDIT:

Я прочитал "врезку" в качестве "ScrollBar"; Этот ответ решает проблему с прокруткой.
В любом случае, что это за "боковая панель браузера"?

body { ... overflow:hidden; ... }

должен быть

body { ... overflow:auto; ... }

или просто удалить его.

источник

2013-07-31 17:50:24 MightyPork

Я думаю, что «боковая панель», о которой вы говорите, является черным фоном того, что осталось от контейнера после того, как вы добавите к нему div class=box. Причина, по которой он не отображается, заключается в том, что на самом деле у вас нет бокового барного div.

< Добавьте одну div class="sidebar"></div>

и CSS, включая clearfix, добавить clearfix класс родительского контейнера, как например ... <div id="container clearfix">

FIDDLE

.sidebar { 
    width:200px; 
    height:600px; 
    background:red; 
    float:right; 
} 

.clearfix { 
    *zoom: 1; 
} 

.clearfix:before, 
.clearfix:after { 
    display: table; 
    line-height: 0; 
    content: ""; 
} 

.clearfix:after { 
    clear: both; 
}

источник

2013-07-31 17:58:32 feitla

Я не говорю о боковая панель div, я имел в виду боковую панель для фактического браузера. http://media.macbookjunkie.com/what-are-scrollbars/safari_with_vertical_scrollbar.gif –

В этом случае это не «боковая панель», а «полоса прокрутки». Очевидно, две разные вещи. Пожалуйста, перефразируйте свой вопрос, поскольку он недостаточно ясен. – feitla

Полоса прокрутки браузера не отображается

ответ

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