Question

我有一个页面，我想要消除它从左向右滚动的场景。无论我看到它的分辨率如何，它都会在右侧留下大约70px的空白区域。在页面http://bitfilmfund.com/我已设置

对于城市图像背景部分，我已将主体设置为：

    #baner {
    min-width: 100%;
    float: left;
    background: url(../images/city-backgound.jpg);
    margin-top: 0px;
    }

    html {
    margin: 0px;
    min-height: 100%;
    min-width: 100%;
    }

    body {
    margin: 0px;
    min-height: 100%;
    min-width: 100%;
    }

我还进行了媒体查询，我根据视口的最大宽度定义了CSS来调整图像大小，例如： @media（max-width：1600px）{ #baner {width：100％; } } 让城市景观图像拉伸屏幕，并尝试更小尺寸的小型res，但它只是不起作用。

右边一直有一片白色空间。即使我将CSS宽度设置为高（宽度的高数字，也就是说），直到屏幕被填满，我仍然有左右滚动。我希望图像和背景调整大小以填充屏幕，并且不需要左右滚动。为什么这个CSS不起作用？

Answer 1

快速修复：

带<div>的第一个class='row'导致页面水平滚动;更具体地说：

margin-left: -15px;
margin-right: -15px;

会导致这个不需要的空格和水平滚动条。

此外，<body>上的边距应设置为：

margin: 0px;

为了避免某些浏览器（例如Chrome）应用他们想要应用的“默认”保证金。

更长（剩余）修复：

虽然页面上的容器元素正在动态调整大小，但相当数量的内容却没有。（包括所提到的横幅图像和包含视频的iframe。）应考虑用户的视口大小，因为从较小的〜<1675px宽度查看时，顶部导航栏拒绝调整大小而是创建水平滚动问题。这些问题可以通过使用百分比而不是px来解决，因为我相信你很清楚，（考虑使用容器元素的百分比）。

显然，屏幕尺寸无法无限缩小 - 必须在某处绘制限制。根据{{3}}，大多数浏览器现在至少高于1024x768px，但即使W3Schools也没有调整到此级别。您可以自行选择网站的最小尺寸;但是越是包罗万象，越好。

横幅图片：

这应该是一个相当简单的部分，当使用定义要显示的图像的CSS添加时，以下CSS属性应该对您有用：

background-size: 100%;
background: //your-image-location// no-repeat;

然而，根据浏览器的大小，这将被拉伸或压缩，但是解决问题的良好起点。

希望我的页面调整大小，没有东西向滚动

1 个答案:

快速修复：

更长（剩余）修复：

横幅图片：