带页脚的div倾斜无法正常工作

Question

So, i'm trying to build a website with skewed sections.

On the main content of the webpage i have no problem at all.

The only problem is on the footer. There is a little blank space between the footer and the bottom of the page caused by the last skewed section. I had already tried to change the position, display, margin, padding of all the elements (body, html, div section, footer, etc.. ) but not seems to be working...

This is the skew code i'm using:

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

This is the jsfiddle i've made with my code: http://jsfiddle.net/1keobbqc/

I hope you guys can help me on this one here! Thanks!

Answer 1

This is to be expected, as the screen size grows the angle of your skewed footer will not always be able to stay aligned properly with your small footer. What you can do is use media queries to adjust the angle at certain break points so it stays more level like so:

$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);
   }

}

Here is an exaggerated example to show you the media queries working, adjust your browser to above/under 800px:

FIDDLE

Answer 2

If what you want is to keep the angle constant, and want to make sure that the left side adjusts perfectly, just state

transform-origin: left bottom;

this way, the vertical distance between the footer and the bottom at the left border will be constant (but the right size of the footer will be lower as the width of the page increases)