响应模式下底部背景的错误位置

时间:2017-03-12 13:52:13

标签: javascript jquery html css slideshow

当我切换到响应模式时,底部白色图像不在父ul元素的底部。

你能帮我解决这个问题吗?图片的父元素底部有position:absolute 0(在提供的屏幕截图上标有红色矩形),所以它应该没有问题....

以下是您可以检查元素的页面的链接:Slider

enter image description here

1 个答案:

答案 0 :(得分:1)

问题存在于背景伪元素中的固定高度:

所以尝试使用计算css3动态设置高度并将background-size设置为100%

.slideshow:after {
    content: "";
    background: url(../img/bottom.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(31%);
    z-index: 999999;
}