css - Why is my div too wide? -


in screen capture below, can see horizontal scroll bar there's hidden horizontal space in viewport. grey div @ bottom scrolls. image doesn't. why this?

enter image description here

here css:

table, tr {   margin: 0px; }  table, td {   border-collapse: collapse; }  td {   padding: 5px 15px; }  tr:nth-child(even) {   background-color: #e0e0f0; }  body {   padding: 0px;   margin: 0px; }  button {   padding: 0px;   margin: 0px; }  p {   padding: 0px;   margin: 0px; }  .theheader {   background-image: url("images/qr1920x960x4.png");    width: 100vw;   height: 50vw;    margin: 0px;   padding: 0px;    overflow-x: hidden;    background-attachment: fixed;   background-attachment: fixed;   background-size: contain;   background-repeat: no-repeat;   background-color: #202020; }  .therest {   width: 100vw;   margin: 0px;   padding: 0px;   background-color: rgba(32, 32, 32, 1.0); } 

here html:

<html> <head> <title>quotient ring</title> <link rel="shortcut icon" href="favicon.png"> <link rel="stylesheet" href="main.css"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="keywords" content="procedural, planet, generation"> <script type="text/javascript" src="choosemass.js"></script> <script type="text/javascript" src="globalconstants.js"></script> <script type="text/javascript" src="brentsrand.js"></script> <script type="text/javascript" src="starsystem.js"></script> <script type="text/javascript" src="star.js"></script> <script type="text/javascript" src="planet.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body onload="themainfunction()"> <!-- <body> -->   <!-- <div class="theheader"><img src="images/qr960x480x8.png"></img></div>  -->   <div class="theheader"></div>   <div class="therest">     <p id="makenewsystembutton"></p>     <p id="planetstable"></p>   </div> </body></html> 

here relevent js code builds table:

var htmlstring = ""; htmlstring += "<p style=\"font-size:small;font-family:consolas\">"; htmlstring += "star:</br>"; htmlstring += "type " + starsystem.star.spectralclass + starsystem.star.luminosityclass + "</br>"; htmlstring += "luminosity " + starsystem.star.luminosity.toprecision(3); htmlstring += "</p>";  // semimajoraxis, mass, radius, temperature, pressure, atm, clouds, hyd, frosts htmlstring += "<table style=\"font-size:small;font-family:consolas;border:1px solid black\">";  // lot of code doesn't matter. ask if need see it.  htmlstring += "</table>"; document.getelementbyid("planetstable").innerhtml += htmlstring; 

hope isn't wade through.

by way, how hair grow back?

this issue because of width:100vw in .theader css rule. can solved if use width:100% instead.

explanation here: https://bitsofco.de/viewport-vs-percentage-units/

the vw unit determines size based on width of viewport. however, browsers calculate viewport size browser window, includes space scrollbar. enter image description here

demo: http://jsfiddle.net/lotusgodkk/wek2z339/2/


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 -