高さが100％に設定されているとスライダーが消える

スライダーをhtmlとcssで作成しています。うまくいきますが、高さを100％に設定すると消えます。パーセンテージの代わりにピクセルを使用するとうまく動作しますが、100％などを使用してパーセンテージを使用すると表示されません。これは、すべての.imgcont高さが100％に設定されているとスライダーが消える

body { 
 
    height: 100%; 
 
} 
 

 
.slides { 
 
    height: 100%; 
 
    width:100%; 
 
    padding: 5px; 
 
} 
 

 
.imgcont { 
 
    width: 50%; 
 
    height:100%; 
 
    animation: showpromo 20s linear infinite; 
 
} 
 

 
@keyframes showpromo { 
 
    0%{background-image: url(1.JPG); background-size: 100% 100%;} 
 
    15%{background-image: url(2.JPG); background-size: 100% 100%;} 
 
    20%{background-image: url(3.JPG); background-size: 100% 100%;} 
 
    35%{background-image: url(4.JPG);background-size: 100% 100%;} 
 
    40%{background-image: url(5.JPG); background-size: 100% 100%;} 
 
    55%{background-image: url(1.JPG); background-size: 100% 100%;} 
 
    60%{background-image: url(2.JPG);background-size: 100% 100%;} 
 
    75%{background-image: url(3.JPG);background-size: 100% 100%;} 
 
    80%{background-image: url(4.JPG);background-size: 100% 100%;} 
 
    100%{background-image: url(5.JPG);background-size: 100% 100%;}  
 
}

<!DOCTYPE html> 
 
<html lang=""> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title></title> 
 
    <link rel="stylesheet" href="slider.css" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <div class = "slides"> 
 
     <div class="imgcont"> 
 
     </div> 
 
    </div> 
 
</body>

出典

2017-11-06 Zaid

で起こっている

これはあなたのために動作します。

の代わりに私が100vwを使用していると高さ100vw

のためにあなたがvwドキュメントhereを見つけることができます.slidesから100%幅。

body { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding:0px; 
 
    margin:0px; 
 
} 
 

 
.slides { 
 
    height: 100vh; 
 
    width: 100vw; 
 
    padding: 5px; 
 
} 
 

 
.imgcont { 
 
    width: 100%; 
 
    height: 100%; 
 
    animation: showpromo 20s linear infinite; 
 
} 
 

 
@keyframes showpromo { 
 
    0% { 
 
    background-image: url(http://www.menucool.com/slider/prod/image-slider-2.jpg); 
 
    background-size: 100% 100%; 
 
    } 
 
    15% { 
 
    background-image: url(https://hdwallpaperz.net/wp-content/uploads/2017/01/Images-9.jpg); 
 
    background-size: 100% 100%; 
 
    } 
 
    20% { 
 
    background-image: url(https://www.w3schools.com/css/trolltunga.jpg); 
 
    background-size: 100% 100%; 
 
    } 
 
    35% { 
 
    background-image: url(https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg); 
 
    background-size: 100% 100%; 
 
    } 
 
    40% { 
 
    background-image: url(http://static3.businessinsider.com/image/58dbde7c77bb7050008b4ae9-1190-625/nasas-1-billion-jupiter-probe-just-sent-back-breathtaking-new-images-of-the-gas-giant.jpg); 
 
    background-size: 100% 100%; 
 
    } 
 
    55% { 
 
    background-image: url(http://www.menucool.com/slider/prod/image-slider-2.jpg); 
 
    background-size: 100% 100%; 
 
    } 
 
    60% { 
 
    background-image: url(https://hdwallpaperz.net/wp-content/uploads/2017/01/Images-9.jpg); 
 
    background-size: 100% 100%; 
 
    } 
 
    75% { 
 
    background-image: url(https://www.w3schools.com/css/trolltunga.jpg); 
 
    background-size: 100% 100%; 
 
    } 
 
    80% { 
 
    background-image: url(https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg); 
 
    background-size: 100% 100%; 
 
    } 
 
    100% { 
 
    background-image: url(http://static3.businessinsider.com/image/58dbde7c77bb7050008b4ae9-1190-625/nasas-1-billion-jupiter-probe-just-sent-back-breathtaking-new-images-of-the-gas-giant.jpg); 
 
    background-size: 100% 100%; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html lang=""> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title></title> 
 
    <link rel="stylesheet" href="slider.css" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <div class="slides"> 
 
    <div class="imgcont"> 
 
    </div> 
 
    </div> 
 
</body>

希望を私に尋ねるようにしてください任意の疑いがある場合、これはあなたのために役に立ちました。

出典

2017-11-06 05:45:06 weBBer

これはvwを使用した後に応答しますか？ – Zaid

はい、画面幅の100％になります。 'vw' =' Viewport Width' – weBBer

高さが100％に設定されているとスライダーが消える

答えて

関連する問題