我的宽度大于屏幕，但是body和html设置为0填充和边距，宽度为100％

Question

删除引导程序后，我遇到了这个问题，页面的宽度大于屏幕的宽度，结果出现了水平滚动条。我认为将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%;
}

Answer 1

使用box-sizing: border-box;以便您的填充包含在宽度中。否则，您的实际宽度为 100% + 25% + 25% = 150%。

CSS3 box-sizing 属性

内容框 默认。width 和 height 属性（和 min/max 属性）仅包括内容。不包括边框、填充或边距

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>

Answer 2

图片是造成屏幕宽度溢出的原因吗？您始终可以使用box-sizing来帮助清除边距和填充：https : //css-tricks.com/box-sizing/