Question

我有一个网页网站。我的问题是在右侧，大约有15px的边距。我的身体和div的宽度设置为100％。我还必须在页面底部稍微滚动。此问题与所有屏幕尺寸有关。我怎样才能解决这个问题？我不确定要突出显示哪个css和html代码，因此我将仅附加与主要顶部相关的代码，因为所有其他部分（如关于或联系）应具有相同的解决方案...

这是我当前面临的问题的图片。

HTML：

<div id="main-top" class="main-top">
    <div class="main-content">
        <div class="container content">
            <div class="row text-center">
                <h2>
                    LORUM IPSUM
                    <div class="words words-1">
                        <span>Lorum Ipsum 1</span>
                        <span>Lorum Ipsum 2</span>
                        <span>Lorum Ipsum 3</span>
                    </div>
                </h2>
            </div>
         </div>
    </div>
</div>

CSS：

html, body {
    height: 100%;
    width: 100%;
}

body {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #555;
    background-color: #FFF !important;
    line-height: 1.5;
    letter-spacing: 0.1em;
}

.main-top {
    position: relative;
    width: 100%;
    height: 100%;
}

.main-top .main-content {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    display: table;
}

Answer 1

默认情况下，大多数主流浏览器默认都将边距设置为8px。它由浏览器提供的用户代理样式表以像素为单位定义。

某些浏览器允许您创建和使用自己的用户代理样式表，但是如果您正在开发网站，则建议不要更改此样式表，因为您的用户很可能不会修改样式表，然后与您看到的页面不同。

如果要更改它，可以执行以下操作：

body {
   margin: 0;
   padding: 0;
   ...
}

如果您有大型复杂的网站，我强烈建议您使用normalize.css。由于它会重置许多默认值，因此预定义值在各个浏览器中都保持一致。

Answer 2

添加此

 Html, body 
{
    max-width: 100%
    overflow-x: hidden;
 }

希望这可以解决您的问题。

Answer 3

我将您的代码粘贴在一个代码段中，并将margin: 0;添加到您的html, body { ... } CSS块中。这样就解决了这个问题（据我所知，至少从运行下面的代码片段可以看出）：

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
}

body {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #555;
    background-color: #FFF !important;
    line-height: 1.5;
    letter-spacing: 0.1em;
}

.main-top {
    position: relative;
    width: 100%;
    height: 100%;
}

.main-top .main-content {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    display: table;
}

<div id="main-top" class="main-top">
    <div class="main-content">
        <div class="container content">
            <div class="row text-center">
                <h2>
                    LORUM IPSUM
                    <div class="words words-1">
                        <span>Lorum Ipsum 1</span>
                        <span>Lorum Ipsum 2</span>
                        <span>Lorum Ipsum 3</span>
                    </div>
                </h2>
            </div>
         </div>
    </div>
</div>

Answer 4

我遇到了同样的问题，

就我而言，我的填充物会推出一个特定的部分，这很难找到。

我要做的是在HTML结构中逐节删除。最终，通过简单地选择元素并在开发工具Chrome中将其删除（在PC上为键F12或右键单击并检查）就可以找到问题。

希望这会有所帮助，祝你好运！

Answer 5

我遇到了与您相同的问题-虽然我正在使用Bootstrap 4。如果您中有人遇到此问题，建议您执行以下操作：

打开google devtools（CTRL + U），然后开始删除网站的元素，直到找到导致该位置错误的部分为止。

然后在您的html代码中分析该部分。

在我的情况下，我有个，在页面的两边都有-15px的空白。您必须使用as作为包装，而不能直接以“行”开头。

希望这对某人有帮助。

网页宽度不是100％

5 个答案: