我的宽度比屏幕大，但body和html的padding和margin都设置为0，宽度为100%。

Question

删除Bootstrap后，我遇到了一个问题，页面的宽度大于屏幕，因此出现了水平滚动条。我认为将body、html设置为0填充和边距以及100％宽度应该没有问题，但问题仍然存在。

解决方案编辑：我的图片比视图更宽，所以我需要设置box-sizing: border-box以将图像包含在父级中。然后我将其继承给所有元素。所以现在我的CSS顶部是：

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

* {
    box-sizing: inherit;
}

HTML：

@{
    ViewBag.Title = "Home Page";
}
<div class="main">
    <div class="content">
        <div id="welcome" class="page">
            <h1>asasd</h1>
            <p>
                test3
            </p>
        </div>
        <div id="asdasd" class="page" data-original="/Images/asdh.jpg">
            <h1>asdasd</h1>
            <p>
                test2
            </p>
            <div class="vfd"></div>
            <div class="measurment"></div>
        </div>
        <div id="test2" class="page" data-original="/Images/test.jpg">
            <h1></h1>
            <p>test
            </p>
        </div>
    </div>
</div>

CSS：

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.main {
    width: 100%;
    height: 100%;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    height: 300vh;
}

.page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
    padding-left: 25%;
    padding-right: 25%;
}

- J.Doe

Answer 1

您的图片是否导致了屏幕宽度溢出？您可以使用box-sizing来帮助清除边距和填充：https://css-tricks.com/box-sizing/

- Cat Fox

---

嗯！这个有效，谢谢，学到了新东西：）我将在2分钟内标记为答案。 - J.Doe

非常感谢，在我的情况下，这是由于视频滚动<section>超过了body的宽度限制，但只有在检查元素时才能捕获到 :-) - JWC May

Answer 2

使用box-sizing: border-box;可以使padding包含在宽度内。否则，实际宽度为100% + 25% + 25% = 150%。

CSS3盒模型大小属性 默认为content-box。宽度和高度属性（以及最小/最大属性）仅包括内容。边框、内边距或外边距不包括在内。 border-box属性包括内容、内边距和边框，但不包括外边距。

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.main {
    width: 100%;
    height: 100%;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    height: 300vh;
}

.page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
    padding-left: 25%;
    padding-right: 25%;
    box-sizing: border-box;
}

<div class="main">
    <div class="content">
        <div id="welcome" class="page">
            <h1>asasd</h1>
            <p>
                test3
            </p>
        </div>
        <div id="asdasd" class="page" data-original="/Images/asdh.jpg">
            <h1>asdasd</h1>
            <p>
                test2
            </p>
            <div class="vfd"></div>
            <div class="measurment"></div>
        </div>
        <div id="test2" class="page" data-original="/Images/test.jpg">
            <h1></h1>
            <p>test
            </p>
        </div>
    </div>
</div>

- Dalin Huang

---

这是解决方案，但填充不是我的问题。图片是问题所在。谢谢！ - J.Doe

@J.Doe实际上，box-sizing: border-box解决了填充和img的两个问题，祝你好运=D - Dalin Huang

对于全局默认值： body {box-sizing: border-box;} 和 body * {box-sizing: border-box;} - SwiftNinjaPro

这条评论可行，但不是答案，哈哈 - Rohan Devaki

Answer 3

只需在您的CSS中替换此部分，水平滚动条就会消失：

.content {
       display:inline-block;
      /*display: flex;
      flex-direction: column;
      align-items: stretch;*/
      padding: 0;
      height: 300vh;
 }

但是我真的不明白你想用这些CSS代码实现什么样的效果。

- bestwebdevs