CSS,不需要的水平移动滚动

时间:2019-04-02 05:51:31

标签: html css flexbox overflow

我遇到了一个小问题,由于某种原因,我在<html>标签的左侧看到了一个巨大的白色缝隙

我试图添加HTML和body标签,这是这样的规则:

overflow-x: hidden; max-width: 100vw;

它适用于桌面视图(即使我调整了浏览器窗口的大小) 但这对移动没有帮助(在chrome开发工具中对移动视图没有帮助)。

可能是什么问题? 我认为这与网站css主要使用flexbox有关。

我也怀疑它与图片中红色标记的div有关(该位置固定,但由于某些原因向下滚动后会出现)。

这是div css规则

.contact-mobile{
    position: fixed !important;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding: 15px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    max-width: 100vw;
    background-color: $black;
    opacity: 0.9;

    a{
        min-width: 25%;
        text-align: center;
        padding: 5px;
        i{
            color: #fff;
        }
        &:hover{
            opacity: 1;
            i{
                color: $black;
            }
            background-color: $green;

        }
    }
}

这是开发站点http://davdev.co.il/broker 这是我所看到的缩小 https://www.screencast.com/t/P7zQwdWySBv

enter image description here

1 个答案:

答案 0 :(得分:1)

问题出在您的iframe位置,

放置top: -5000px而不是left: -5000px,它将弥补移动设备上的空白