Why there is no scroll bar in any browser?

Question

My own page doesn't have a scroll bar, no matter what I do, minimize or zoom in/out. It just doesn't appear, I've tried FF, Chrome and IE: all no. Other internet pages are fine. Here is the body element and css:

<body>
<div class="container" id="page">

The CSS is like:

html, body
{
    margin: 0;
    padding: 0;
    color: #555;
    font: normal 10pt Arial,Helvetica,sans-serif;
    background: #EFEFEF;
    overflow: scroll;
}

#page
{
    margin-top: 5px;
    margin-bottom: 5px;
    background: white;
    border: 1px solid #C9E0ED;
}

PS: I'm using YII framework.

UPDATE:

IT seems YII has some default css settings, in screen.css the div container is mentioned three times as follows:

 .container {width:1250px;margin:0 auto;}
 .container:after 
 {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}

.container {display:block;}

I changed overflow:hidden to overflow:scrollbut still didn't work.

Could you add a jsfiddle which reproduces this? http://jsfiddle.net/ — RononDex, Jan 14 '14 at 08:33
It seems like you dont show all you HTML code... Does the div have a closing tag ? — Webking, Jan 14 '14 at 08:34
When using overflow you should also specify element height. Did you try removing that property? — SOReader, Jan 14 '14 at 08:35
Are you using a mac? >_< - You could be looking for [this](http://stackoverflow.com/questions/1202425/making-the-main-scrollbar-always-visible) or [this](http://stackoverflow.com/questions/7855590/how-can-i-prevent-scroll-bars-from-being-hidden-for-os-x-trackpad-users-in-webki). — Wez, Jan 14 '14 at 08:38
@Webking Yes, this is part of the code, The div pairs are all fine. — Evelyn1986, Jan 14 '14 at 08:52
@Wezly no I'm not using a mac , thanks. @SOReader @Happy Patrick I added the height and width properties, `width: 80px; height: 80px` still no scroll bar. — Evelyn1986, Jan 14 '14 at 08:57
Wild guess, did somewhere else in your code reset css like this `body{overflow:OTHERVALUE !important}`? — lastr2d2, Jan 14 '14 at 09:04
@lastr2d2 Good guess, I searched and found something might reset the css, see my update.. still didn't work — Evelyn1986, Jan 14 '14 at 09:08

score 1 · Accepted Answer · answered Jan 14 '14 at 08:47

In order to see a scroll you'll have to define a height and or width in which creates a scroll. Not being able to see if you have content or what your mark-up is like -- declaring at the HTML or body tag will do the trick.

html, body
{
    margin: 0;
    padding: 0;
    color: #555;
    font: normal 10pt Arial,Helvetica,sans-serif;
    background: #EFEFEF;
    overflow: scroll;
    height: 1000px; // toggle
    width: 100% // toggle

}

score 0 · Answer 2 · answered Jan 14 '14 at 08:38

0

@Evelyn1986 Force some width and it'll come up. Try width:805px; overflow:auto; Then just have some content, that's 'big'

answered Jan 14 '14 at 08:38

Patrick Mutwiri

1,301
1
12
23

There is no need to force any width. OP has already set `overflow:scroll` https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Syntax – lastr2d2 Jan 14 '14 at 08:46
Forcing width is just for test purposes in this case. – Patrick Mutwiri Jan 14 '14 at 10:30

score 0 · Answer 3 · answered Jan 14 '14 at 08:43

please add height on body tag..and add content more than what value you are give on height property....

body
{
margin: 0;
padding: 0;
color: #555;
font: normal 10pt Arial,Helvetica,sans-serif;
background: #EFEFEF;
overflow: scroll;
height:100px;
}

Fiddle : http://jsfiddle.net/nikhilvkd/rVd4M/

Why there is no scroll bar in any browser?

3 Answers3