css div IDコンテナが、高さと幅のパーセントの背景画像を表示しない

高さと幅がパーセントで表示されているCSS div id gamecontainerが背景画像を表示しないのはなぜですか？それはピクセルで動作しますが、私はそれが異なる画面サイズを埋めることを望みます。css div IDコンテナが、高さと幅のパーセントの背景画像を表示しない

<!DOCTYPE html> 
<html> 
<head> 
<style> 

body{ 
    height:100%; 
    width:100%; 
} 

#gamecontainer { 
    width:100%; 
    height:100%; 
    background:url("http://www.w3schools.com/css/img_forest.jpg"); 
    border: 1px solid black; 
} 

.gamelayer { 
    width:640px; 
    height:480px; 
    position:absolute; 
    display:none; 
} 
</style> 
</head> 
<body> 
<div id="gamecontainer"> 
<canvas id="gamecanvas" width="100%" height="100%" class="gamelayer">   
</canvas> 
</div> 
</body> 
</html>

出典

2016-04-18 Paul

代わりパーセントのVWまたはVHを使用してみてください。これは、画面サイズの1％を基準にしたサイズに基づいています。たとえば、代わりに

body { 
height:100%; 
width:100%; 
}

の

はここ

body { 
height:100vh; 
width:100vw; 
}

を試してみて、

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw

出典

2016-04-18 03:15:15

あなたが、私はそれに答えるカントなぜ、質問については、次のように使用することができ、私はちょうどあなたのhtmlにwidthとheightを追加し、説明では良くないと思います。

html{ 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
body{ 
 
    height:100%; 
 
    width:100%; 
 
} 
 

 
#gamecontainer { 
 
    width:100%; 
 
    height:100%; 
 
    background:url("http://www.w3schools.com/css/img_forest.jpg"); 
 
    border: 1px solid black; 
 
} 
 

 
.gamelayer { 
 
    width:640px; 
 
    height:480px; 
 
    position:absolute; 
 
    display:none; 
 
}

<div id="gamecontainer"> 
 
<canvas id="gamecanvas" width="100%" height="100%" class="gamelayer">   
 
</canvas> 
 
</div>

出典

2016-04-18 03:03:42 mmativ

は単純に横に100％の幅と高さでhtmlを追加使われている方法の一例ですbodyです次のようになります：

html, body{ 
    height:100%; 
    width:100%; 
}

出典

2016-04-18 03:30:20

css div IDコンテナが、高さと幅のパーセントの背景画像を表示しない

答えて

関連する問題