以下の画面キャプチャでは、水平スクロールバーから、ビューポートに非表示の水平スペースが表示されます。下の灰色のdivはスクロールします。画像はありません。どうしてこれなの?ここで私の部門はなぜ広すぎますか?
私の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);
}
は私の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>
は、テーブルを構築relevent jsのコードです:
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\">";
// A lot of code that probably doesn't matter. Just ask if you need to see it.
htmlString += "</table>";
document.getElementById("planetsTable").innerHTML += htmlString;
これはあまりにもずっとウェイドを越えることができないことを願っています。
ところで、どのくらい早く髪が育つのですか?