web-dev-qa-db-ja.com

幅が画面よりも大きいが、本文とhtmlが0のパディングとマージン、100％の幅に設定されている

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%;
}
htmlcsswidthscrollbarpadding
5
J.Doe

あなたの画像はあなたの画面幅をオーバーフローさせていますか？いつでもボックスサイズを使用して、マージンとパディングをクリアすることができます： https://css-tricks.com/box-sizing/

6
Cat Fox

使用する box-sizing: border-box;したがって、パディングは幅に含まれます。それ以外の場合、実際の幅は100％+ 25％+ 25％= 150％です。

enter image description here

CSS3 box-sizingプロパティ

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>
2
Dalin Huang

CSSのこの部分を置き換えるだけで、水平スクロールがなくなります。

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

しかし、私はあなたがそれらのCSSコードで何を達成しようとしているのか本当に理解していません。

0
bestwebdevs