Question

在下面的屏幕截图中，您可以从水平滚动条中看到视口中有隐藏的水平空间。底部的灰色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>

以下是构建表格的相关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;

希望这并不过分。

顺便问一下，头发会多快恢复过来？

Answer 1

此问题是由于width:100vw css规则中的.theader。如果您使用width:100%，则可以解决此问题。

此处的说明：https://bitsofco.de/viewport-vs-percentage-units/

vw单位根据视口的宽度确定其大小。但是，浏览器会将视口大小计算为浏览器窗口，其中包含滚动条的空间。

演示：http://jsfiddle.net/lotusgodkk/wek2z339/2/

Answer 2

这是因为你<td>的填充。你在他们的容器上使用width: 100vw;，但他们的填充增加了宽度。

将td样式更改为：

td {
  padding: 0px;
}

为什么我的div太宽了？

2 个答案: