html - Browser scrollbar not appearing -
i have problem browser scrollbar doesn't appear when web content extends beyond browser window. i'm pretty sure problem located in container div , not footer, removing footer doesn't change anything. suggestions?
here's html part.
<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> here's css part.
@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; }
edit:
i read "sidebar" "scrollbar"; answer solves scrollbar problem.
anyway, heck "browser sidebar"?
body { ... overflow:hidden; ... } should be
body { ... overflow:auto; ... } or remove it.
Comments
Post a Comment