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

【问题标题】：skewed div with footer doesn't work properly带有页脚的倾斜 div 无法正常工作
【发布时间】：2015-03-11 17:40:12
【问题描述】：

所以，我正在尝试建立一个带有倾斜部分的网站。

在网页的主要内容上我完全没有问题。

唯一的问题在于页脚。由于最后一个倾斜的部分，页脚和页面底部之间有一点空白。我已经尝试更改所有元素（正文、html、div 部分、页脚等）的位置、显示、边距、填充，但似乎没有工作......

这是我正在使用的倾斜代码：

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

这是我用我的代码制作的 jsfiddle：http://jsfiddle.net/1keobbqc/

我希望你们能在这里帮助我！谢谢！

【问题讨论】：

是这个小提琴的问题吗？因为它对我来说看起来不错
没问题，Chrome v.39
是的，试着把视图屏幕放大，这样你能看得更清楚
我现在看到了，试试这个：jsfiddle.net/1keobbqc/1。我已将溢出：隐藏到您有问题的部分。
好吧，它成功了！非常感谢！

标签： html css sass

【解决方案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

【讨论】：

好的，我看到了，但问题仍然存在。这是您的 jsfiddle 的屏幕（仍然存在问题）：i.imgur.com/FCNimVF.png 这是我的结果屏幕寻找：i.imgur.com/fgeF3r0.png 我知道我可以在普通 div 中使用透明边框。但由于我正在寻找一个响应式网站，这种方法对我来说效果不佳
不，我得到的截图来自你的 jsfiddle @jmore009
好的，只是检查一下。您需要将屏幕大小调整到 800 像素以下才能看到效果，但请阅读我的解释，这只是使用媒体查询的示例。我不在你的屏幕尺寸上，所以很难真正解决你的问题。我建议您如何通过调整使用媒体查询的角度来解决它。那有意义吗？ @CelsomTrindade
是的，我明白了。但即使我改变角度，它也只能在小屏幕上工作。在像我这样的大屏幕（1080p）上它不起作用。我尝试使用负边距。我可以消除最后一个倾斜的 div 和页脚之间的空间。但不能在页脚和正文之间。在小屏幕上它工作正常，但你知道大屏幕的另一种解决方案吗？
我认为你不太明白我在说什么。您使用适合您大小的媒体查询，所以我的示例有 @media only screen and (max-width: 800px) 将 800 更改为 2000 或任何适合您的东西，您可以使用多个媒体查询

【解决方案2】：

如果你想要保持角度不变，并且想要确保左侧完美调整，只需声明

transform-origin: left bottom;

这样，页脚与左边框底部的垂直距离将保持不变（但页脚的右侧尺寸会随着页面宽度的增加而变小）

【讨论】：