바닥 글이 비어있는 div가 제대로 작동하지 않습니다.

Question

그래서 저는 비뚤어진 섹션이있는 웹 사이트를 구축하려고합니다.

웹 페이지의 주요 내용에는 전혀 문제가 없습니다.

유일한 문제는 바닥 글에 있습니다. 마지막 비뚤어진 섹션으로 인해 바닥 글과 페이지 하단 사이에 약간의 공백이 있습니다. 나는 이미 모든 요소 (body, html, div 섹션, footer 등)의 위치, 표시, 여백, 패딩을 변경하려고 시도했지만 작동하지 않는 것 같습니다 ...

이것은 기울이기 코드입니다 내가 사용하고 있습니다 : http://jsfiddle.net/1keobbqc/

나는 너희들이 여기 하나에 나를 도울 수 있기를 바랍니다 :

$deg: 3deg; 
.skew { 
    -ms-transform: skewY($deg); /* IE 9 */ 
    -webkit-transform: skewY($deg); /* Chrome, Safari, Opera */ 
    transform: skewY($deg); 
} 

이 난 내 코드로 만들어 놓은 jsfiddle입니다! 감사!

Answer 1

화면 크기가 커지면 기울어 진 바닥 글의 각도가 항상 작은 바닥 글에 제대로 맞춰 유지되지 않을 것으로 예상됩니다. 당신이 할 수있는 일은 그렇게 같은 더 수준 유지, 그래서 사용하는 미디어 쿼리는 특정 브레이크 포인트의 각도를 조정하는 것입니다 : 여기

$deg: 3deg; 
$deg-media: 8deg; 

.skew { 
    -ms-transform: skewY($deg); /* IE 9 */ 
    -webkit-transform: skewY($deg); /* Chrome, Safari, Opera */ 
    transform: skewY($deg); 
} 

.skew-rev { 
    -ms-transform: skewY(-$deg); /* IE 9 */ 
    -webkit-transform: skewY(-$deg); /* Chrome, Safari, Opera */ 
    transform: skewY(-$deg); 
} 

@media only screen and (max-width: 1400px){ 
    .skew { 
     -ms-transform: skewY($deg-media); /* IE 9 */ 
     -webkit-transform: skewY($deg-media); /* Chrome, Safari, Opera */ 
     transform: skewY($deg-media); 
    } 

    .skew-rev { 
     -ms-transform: skewY(-$deg-media); /* IE 9 */ 
     -webkit-transform: skewY(-$deg-media); /* Chrome, Safari, Opera */ 
     transform: skewY(-$deg-media); 
    } 

} 

이 작업을 당신에게 미디어 쿼리를 보여 위에서 브라우저를 조정하는 과장된 예입니다/800 픽셀 미만 :

FIDDLE

Answer 2

단지 상태를 일정한 각도를 유지하고, 왼쪽 완벽하게 조정 있는지 확인하려면 것입니다 당신이 원하는 경우

transform-origin: left bottom; 

이렇게하면 왼쪽 테두리의 바닥 글과 바닥 사이의 수직 거리가 일정합니다 (그러나 페이지의 너비가 커짐에 따라 바닥 글의 오른쪽 크기가 작아짐)