2017-09-11 4 views
0

以下の画面キャプチャでは、水平スクロールバーから、ビューポートに非表示の水平スペースが表示されます。下の灰色のdivはスクロールします。画像はありません。どうしてこれなの?ここで私の部門はなぜ広すぎますか?

enter image description 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); 
} 

は私の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; 

これはあまりにもずっとウェイドを越えることができないことを願っています。

ところで、どのくらい早く髪が育つのですか?

答えて

1

この問題は、width:100vw.theaderでのCSSルールです。これは、代わりにwidth:100%を使用すると解決できます。

ここで説明:https://bitsofco.de/viewport-vs-percentage-units/

VW部は、ビューポートの幅に基づいて、その大きさを決定します。ただし、ブラウザは、ブラウザウィンドウとしてビューポートのサイズを計算します。ブラウザウィンドウには、スクロールバーのスペースが含まれます。 enter image description here

デモ:http://jsfiddle.net/lotusgodkk/wek2z339/2/

0

あなたの<td>の埋め込みによるものです。コンテナにはwidth: 100vw;を使用しますが、パディングは幅を追加します。

これにあなたの tdスタイルを変更

td { 
    padding: 0px; 
} 
関連する問題