백분율은 높이에서 어떻게 작동합니까?

나는 html, js 및 css를 혼합하여 약간의 tic-tac-toe를 만들고 있습니다. 그러나 모든 모바일 또는 컴퓨터 장치에 맞게 크기를 조정하고 싶습니다. 그래서, 내 div의 크기를 결정하는 대신 px, %에서 결정해야합니다. 하지만 약간의 문제가 있습니다 : 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%; 
}

출처

2016-09-04 André Helena

당신이'vl' 또는'vh'를 사용하여 시도? – RamenChef

"엉망이 된"이유가 무엇입니까? div에 100 % 사용 가능한 너비와 100 % 사용 가능한 높이가되도록 지시하고 절대적으로 배치하여 컨테이너가 아닌 창 크기를 기준으로 측정합니다. div가 전체 영역을 차지하지 않도록하려면 100 %를 사용하지 마십시오. 100 %가 100 % 미만이 될 것으로 기대하십니까 ?? – Scott

@Scott 컨테이너 위치가 100 % 너비이고 원하는 위치에 절대 위치가 아닌 위치가 어떻게되어야합니까? –

상관이 코드입니다. 빠른 예를 들어,이 바이올린을 참조하십시오 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>

출처

2016-09-05 01:10:52

백분율은 높이에서 어떻게 작동합니까?

답변

관련 문제