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

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -