Y 요소의 너비가 감소 할 때 X 요소의 패딩 증가

Question

기본적으로 body 요소는 물론 100% 너비를 차지하므로 브라우저 창의 크기가 조정되면이 너비가 픽셀이 분명히 줄어 듭니다. 모든 픽셀에 대해 body 너비가 감소되었습니다. 요소 그룹 (header, main 및 footer)의 패딩을 1 픽셀 씩 늘려야합니다. 어디서부터 시작해야할지 모르겠습니다. 여기에 기본이 설정 : 브라우저 창 크기를 조정

function start() { 
 
    //code here.. 
 
} 
 

 
start();

@import url('https://necolas.github.io/normalize.css/latest/normalize.css'); 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
html, body { 
 
    height: 100%; 
 
} 
 
body, header, main, footer { 
 
    padding: 1%; 
 
} 
 
header, main, footer { 
 
    height: 33.333%; 
 
} 
 
div { 
 
    height: 100%; 
 
    background-color: #444; 
 
    color: #ddd; 
 
} 
 
p { 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    text-align: center; 
 
}

<header> 
 
    <div> 
 
    <p>When this snippet is made <b>Full page</b>.</p> 
 
    </div> 
 
</header> 
 

 
<main> 
 
    <div> 
 
    <p>And the browser window width is <i>decreased</i>.</p> 
 
    </div> 
 
</main> 
 

 
<footer> 
 
    <div> 
 
    <p>The padding on these rectangles should <i>increase</i>.</p> 
 
    </div> 
 
</footer>

및 body 폭 이 감소 나는 비례 header, width 및 height에 증가에 패딩 값을합니다.

원래 CSS를 사용하는 JavaScript없이 viewport 단위를 달성하려고 시도했습니다. 그게 잘 풀리지 않았어.

PS : Jquery를 사용하지 않으려 고합니다.

---

편집 : 난 그냥이 실현하지만, 기본 패딩 동작을 포함하는 요소 폭 감소 등의 가치 감소에 있음을 지적 가치가있을 수도 있습니다. 모두 상단 & 하위로 우측 padding가 컨테이너에 의해 계산된다 & 왼쪽 폭 내 단편의 크기가 변경되었을 때 알 수있는 바와 같이.

Answer 1

padding: 0 calc(500px - 50vw); 

제한된 범위의 뷰포트 크기 (500px - 1000px)에서만 작동합니다.

CSS에서 계산을 수행 할 때의 문제는 뷰포트가 이론적으로 수천 픽셀의 넓이를 가질 수 있기 때문에 정의 된 상한값과 하한값이 있어야한다는 것입니다.이 값은 사용할 수있는 패딩 어떤 점에서.

내 코드는 상한값을 500px으로 설정하여 작동하므로 좌우로 1000px 합계를 적용한 다음 하한값은 50vw 값의 절반, 즉 50 % . 이 값들을 가지고 노는다면 당신의 필요에 맞게 상한선과 하한선을 맞출 수 있습니다.

http://codepen.io/zepha/pen/QpMRYQ