CSS의 높이 비율 위쪽/아래쪽 여백을 추가하는 방법

Question

클라이언트가 픽셀 완벽한 디자인을 원한다면이 경우 "이 경우"와 같이 "완벽한 비율"이 어떻게됩니까?

전체 컨테이너는 100 % 높이 때문에 100 % 높이의 모든 div에 공백의 합이다.

여기서 문제는 div에서 margin-bottom을 사용하여 공백을 추가하려고했지만 백분율 여백이 100 % 높이의 전체 컨테이너 안에 원하는 값을 나타내지 않는다는 것을 깨달았습니다.

내가 아는 유일한 해결책은 여백 대신 높이가 % 인 div를 사용하는 것입니다. 그러나 나는 더 깨끗한 html을하고 싶다. 이 다른 대안이 있습니까?

추가 정보 : 나는 phonegap + ionic을 사용하고 있으며, 모바일 디자인입니다. 당신이 높이를 만들고 폭이 패딩/테두리를 포함

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 

를 사용할 수

Answer 1

우선이 :nth-child을 사용하여 각 div의 높이와 여백을 설정하십시오.

*{box-sizing: border-box} 
 
:root{width: 100vw; height: 100vh; text-align: center} 
 
body{padding: 0; margin:0} 
 
div{ 
 
    display: block; 
 
    background: #333; 
 
    width: 480px; 
 
} 
 

 
div:first-child, div:nth-child(2){ 
 
    height: 15vh; 
 
    margin: 0 0 2.5vh 0 
 
} 
 

 
div:nth-child(3){ 
 
    height: 20vh; 
 
    margin: 0 0 5vh 0 
 
} 
 

 
div:nth-child(4){ 
 
    height: 30vh 
 
}

<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

Answer 2

, 당신은 그런 height:100vh

에 루트 요소를 설정해야합니다 살펴 http://css-tricks.com/box-sizing/

Answer 3

답변으로 내 피들을 게시하는 것이 좋습니다. 그래서 결론은 다음과 같습니다. OP가 실행되는 문제는 퍼센트를 사용할 때 여백이 percent of the width (See "<percentage>")으로 계산된다는 것입니다. 즉, margin-bottom: 50%은 높이가 아니라 컨테이너 너비의 50 %입니다. 이 문제를 해결하는 한 가지 방법은 vh (뷰포트 높이) 측정 단위를 사용하는 것입니다. 이것은 물론 뷰포트의 퍼센트로 제한되며 컨테이너가 아닙니다.하지만 디자인이 본질적으로 스크롤없이 전체 화면 인 한 가능한 해결책입니다 (먼저 사용자에게 @Tambo의 크레딧을 제시하십시오). 여기

http://caniuse.com/#feat=viewport-units이 솔루션

.small { 
    height: 15%; 
    margin-bottom:2.5vh; 
} 

.medium { 
    height: 20%; 
    margin-bottom:5vh; 
} 

.large { 
    height: 30%; 
    margin-bottom:10vh; 
} 

의 중요한 부분 그리고 데모 링크입니다 : http://jsfiddle.net/c28h58cw/

Answer 4

왜 그렇게하지

호환성도 (esspecially IE에 대한) 우려입니다 상식 연산과 절대 위치 지정을 사용 하시겠습니까? 그런 식으로 브라우저 지원을 확인할 필요가 없습니다. 비율의 상단과 하단 여백은 부모 요소의 폭이 아닌 높이를 기준으로

주

div { 
 
    background-color: #888; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
div:nth-child(1) { 
 
    top: 0; 
 
    height: 15%; 
 
} 
 
div:nth-child(2) { 
 
    top: 17.5%; 
 
    height: 15%; 
 
} 
 
div:nth-child(3) { 
 
    top: 35%; 
 
    height: 20%; 
 
} 
 
div:nth-child(4) { 
 
    top: 60%; 
 
    height: 30%; 
 
}

<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

. 그냥 또 다른 CSS를 WTF.