我的寬度比我的屏幕大，但是body和html設置為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%;
}

Answer 1

你的圖像是什么讓你的屏幕寬度溢出？ 您始終可以使用大小調整來幫助清除邊距和填充： https ： //css-tricks.com/box-sizing/

Answer 2

使用box-sizing: border-box; 所以你的填充包含在寬度中。 否則，您的實際寬度為100％+ 25％+ 25％= 150％。

CSS3 box-sizing屬性

content-box默認。 width和height屬性（以及min / max屬性）僅包含內容。 邊框，填充或邊距不包括在內

border-box width和height屬性（以及min / max屬性）包括內容，填充和邊框，但不包括邊距

 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 3

只需在CSS中替換此部分，水平滾動就會消失：

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

但我真的不明白你用這些CSS代碼想要實現的目標。