パーセンテージは高さでどのように働いていますか

Question

私はちょっとしたタックトーンをhtml、js、cssのミキシングをしていますが、私はそれをどのモバイル機器やコンピュータ機器にも適応させたいと思っています。だから、pxのdivのサイズを確定するのではなく、%で確定する必要があります。しかし、少し問題があります：divだけでなく、ページ全体に関連する割合です。私はhtmlとbodyタグの高さと高さを100％にしましたが、うまくいきませんでした。ここで

あなたは正方形の縦横比を維持した後にしていると仮定すると、幅とパディングの組み合わせについて

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

body { 
    background-color: #9c9f84; 
    margin:0; 
    font-family: verdana; 
    font-size: 14px; 
    text-align: center; 
} 

#myDiv { /* there is where the percentage is massed up */ 
    border-radius: 5px; 
    background-color: #e5e4d7; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    right: 10%; 
    top:25%; 
} 

Answer 1

どのようにしても問題のコードです。簡単な例のために、このフィドルを参照してください。https://jsfiddle.net/L6uz24gv/2/

.tile { 
 
    background: #ccc; 
 
    display: inline-block; 
 
    margin: 1%; 
 
    width: 30%; 
 
    padding-bottom: 30%; 
 
}

<div id="tic-tac-toe"> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
</div>