html - The scroll bar appear even if set 100 width and height -
i start learn web development bought course on udemy.for i'm learning css3/html5 , began little project css3.a web page represent universe.i want create animation. have problem: want page full width , height ( no scrolling ).firstly put black color on page , after created 616x616 png image white dots represent stars.well, after place stars on page, full width/height dissappear , scrolling active.why ? html code:
<html> <head> <title>earth planet orbiting</title> <link rel="stylesheet" type="text/css" href="normalize.css"> <link rel="stylesheet" type="text/css" href="style.css"> <!--[if lt ie 9]> <script src="bower_components/html5shiv/dist/html5shiv.js"></script> <![endif]--> </head> <body id="universe"> <div id="stars"></div> <div id="sun"></div> <div id="earth0rbit"> <img src="images/earth.png" alt="earth" width="130" height="125"> <div id="moon0rbit"> <div id="moon"></div> </div> </div> </body> </html>
and css code
html, body { height: 100%; width: 100%; } #universe { background: black; background: -webkit-radial-gradient(#555, #000); background: -moz-radial-gradient(#555, #000); background: -o-radial-gradient(#555, #000); background: radial-gradient(#555, #000); } #stars { width: 100%; height: 100%; background-image: url('images/stars.png'); }
if delete #stars lines width , height, scroll disabled dots (stars are't appearing) can ? sorry english!
first, set margins of html
, body
0. default margin 8px, total width of body 100% (of window) plus 16px, totalling more 100%!
secondly, in current example #stars div 100% high, have other content after it, 125px in all, means total content height 100% plus 125px. solution 1 decrease height of #stars 125px.
html, body { height: 100%; width: 100%; margin:0; /* new */ } #universe { background: black; background: -webkit-radial-gradient(#555, #000); background: -moz-radial-gradient(#555, #000); background: -o-radial-gradient(#555, #000); background: radial-gradient(#555, #000); } #stars { width: 100%; height: calc(100% - 125px); background-image: url('images/stars.png'); }
<html> <head> <title>earth planet orbiting</title> <link rel="stylesheet" type="text/css" href="normalize.css"> <link rel="stylesheet" type="text/css" href="style.css"> <!--[if lt ie 9]> <script src="bower_components/html5shiv/dist/html5shiv.js"></script> <![endif]--> </head> <body id="universe"> <div id="stars"></div> <div id="sun"></div> <div id="earth0rbit"> <img src="images/earth.png" alt="earth" width="130" height="125"> <div id="moon0rbit"> <div id="moon"></div> </div> </div> </body> </html>
or, more likely, think meant other divs inside #stars div, right? in case, move end tag down.
Comments
Post a Comment