DIV要素がウェブページの長さに合わない

body要素に追加された画像の2番目の背景として使用しているdiv要素がありますが、底辺が決して一致しないため正しく動作しません。ここにはscreenshotがあります。DIV要素がウェブページの長さに合わない

私はそれを一度動作させましたが、他の要素を変更するといつも乱雑になります。私は幅についても同じ問題があります。私はこの1つにこだわっているので、あなたが助けてくれることを願っています。

マイCSS：

html, body { 
    height: 100 % ; 
    width: 100 % ; 
    margin: 0; 
    padding: 0; 
} 
body { 
    background: url('../images/choc1.jpg'); 
    font - family: arial, 
    Myriad pro, 
    sans serif; 
    color: #1E1B1B; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    padding:0; 
    margin:0; 
} 
# page { 
     width: 1233.5 px; 
     background - color: rgba(255, 255, 255, 0.7); 
     position: absolute; 
     margin - left: 60 px; 
     margin - right: 0 px; 
     margin - bottom: 0 px; 
     padding: 0 px; 
     min - height: 100 % ; 
}

マイHTML：

<body> 
    <div id="page"> 
</div>

出典

2017-07-08 Challadia Chawki

ようこそ、スタックオーバーフロー！ [ツアー]（https://stackoverflow.com/tour）、を見て、[ヘルプセンター]（https://stackoverflow.com/help）、特にを読んでください[どのようにして私は良い質問をしますか？]（https://stackoverflow.com/help/how-to-ask）と[ここではどのような話題がありますか？]（https://stackoverflow.com/help/on-トピック）。 –

は、だから私はあなたを助ける必要がある例を書きました。

したがって、他のオブジェクト内に配置することを非常に困難にする絶対位置要素をページdivに作成しました。絶対的なものは、他のすべてのものがどこにあるのかを無視して配置することです。このようなコンテナにはめったに使用しないでください。

私が追加した本当の重要な行は、親コンテナの中央（水平方向）に置くmargin: 0 auto;でした。（内側にあるコンテナ）また、マージンを使用するのではなく、ページコンテナを押し込むボディにパディングを配置します。

あなたはまた、いくつかの時間のために、このcodepenを閲覧することができるかもしれない：良い練習にhttps://codepen.io/anon/pen/WOaEeJ

html 
    { 
    height:100%; 
    width:1280px; 
    margin:0; 
    padding:0; 
    } 
    body 
    { 
    background: url('https://static1.squarespace.com/static/56d8bff4a3360ca940504574/t/5847038d3e00be622f3ce337/1481049003115/?format=1500w'); 
    font-family: arial,Myriad pro,sans serif; 
    color:#1E1B1B; 
    background-repeat: no-repeat; 
    background-size: 100%; 
    padding: 20px; 
    } 
    #page 
    { 
    width: 100%; 
    height: 89%; 
    background-color: rgba(255,255,255,0.7); 
    margin: 0 auto; 
    padding:0px; 
    }

出典

2017-07-09 00:44:20

ヘルプブームのためのthnxしかし、必要なものは、上または下から余白/パディングを持たないページです。それは決してうまくいかないようです。 –

私はあなたがコードで行ったことに従ったことはありません。 thnxあなたの偉大な助けをたくさん：D：D –

VH（ビューを使用するクラスのdivあなたのCSSの

<body> 
    <div id="page" class="PageClass"> 
    </div>

をあなたのhtmlを与えますハイト）とVWは（そうのような）プロパティを幅表示：

.PageClass { 
    { 
     **width: 100vw;** 
     background-color: rgba(255,255,255,0.7); 
     position: absolute; 
    /* you wanna take this of since it is not letting you make the page ful width and giving a 60px spaing on the left */ margin-left:60px; 
     margin-right:0px; 
    margin-bottom:0px; 
    padding:0px; 
    min-height:100vh; 
    } 
}

VHおよびVW意志mを用いてdivダイナミックで、すべてのデバイスサイズと互換性があります。簡単に。

幸運な私の友だち

出典

2017-07-10 15:07:48 AviT

アドバイスのための多くのおかげです。やってみます –

DIV要素がウェブページの長さに合わない

答えて

関連する問題