HTMLの幅100％がページ外に出る

Question

私はHTMLとCSSでかなり初心者です。だから、私は100％の幅に問題があります。ブラウザの境界を越えているように見えます。下の例を見てください！ 1セントあたりの幅を少し小さくするか、これを引き起こす可能性のあるコードにいくつかの欠陥がありますか？

ここで幅100％の他の記事を見つけましたが、どちらも本当に私を助けませんでした。ここで私が作った例です。http://jsfiddle.net/gj53jbz9/

---

body{ 
 
       font-size: 15px; 
 
       margin: 0px; 
 
       background-color: lightgrey; } 
 

 
      #header{ 
 
       padding: 30px; 
 
       width: 100%; 
 
       height: 250px; 
 
       background-color: grey; } 
 

 
      #name{ 
 
       padding: 5px; 
 
       font-size: 25px; 
 
       float: left; } 
 

 

 
      #navbar{ 
 
       float: right; 
 
       text-align: right; } 
 

 
      #navbar a{ 
 
       background-color: black; 
 
       display: inline-block; 
 
       width: 120px; 
 
       text-align: center; 
 
       padding: 10px 0px; 
 
       text-decoration: none; 
 
       color: lightgrey; } 
 

 
      #title{ 
 
       clear: both; 
 
       text-align: center; 
 
       padding-top: 100px; 
 
       font-size: 45px; } 
 

 
      #content{ 
 
       text-align: center; 
 
       width: 80%; 
 
       margin: 0px auto; }

<div id=header> 
 
      <div id=name>Name</div> 
 
      <div id=navbar> 
 
       <a href="page1.html">Link1</a> 
 
       <a href="page2.html">Link2</a> 
 
      </div> 
 
      <div id=title>Insert title here</div> 
 
     </div> 
 
     <div id=content> 
 
      <h3>Age of aggression</h3> 
 
      <p>We drink to our youth, to days come and gone. For the age of aggression is just about done. We'll drive out the Stormcloaks and restore what we own. With our blood and our steel we will take back our home.</p> 
 
      <p>Down with Ulfric! The killer of kings! On the day of your death we will drink and we'll sing. We're the children of Skyrim, and we fight all our lives. And when Sovngarde beckons, every one of us dies! But this land is ours and we'll see it wiped clean. Of the scourge that has sullied our hopes and our dreams!</p> 
 
    </div>

Answer 1

あなたが body {} 内のプロパティから margin: 0px;を削除する場合、私はそれがこの動作を持っている理由を知っていない動作しているようです

Answer 2

幅と詰め込みの両方が1つの要素に設定されているためです。デフォルトでは、幅の上にパディングが追加されています。 （幅100％+ 2 * 30pxにする）。

#header{ 
    padding: 30px; 
    width: 100%; 
} 

パディングを削除していない幅のセット、または使用して内部要素にそれを追加してください：幅計算を行い

box-sizing: border-box; 

はパディングが含まれます。 :)

https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 3

すべてのHTML要素には、いくつかのデフォルト値を持っています。ここで確認してください： https://www.w3schools.com/cssref/css_default_values.asp

あなたはまた、ちょうどそのような0とすべての要素のマージンとパディングを設定しようとすることができます：デフォルトでは

*{margin: 0; padding: 0} 

Answer 4

、HTML要素が内容だけに基づいて自分のサイズを計算するので、パディング、ボーダー、マージンは除きます。その動作を変更するには、次のようにします。

box-sizing: border-box; 

これにより、計算にはパディングと境界線が含まれます。あなたが望む任意の要素に追加することができますが、すべての要素に追加するのが一般的である：

* { 
    box-sizing: border-box; 
} 

Answer 5

左右からあなたのヘッダーのdivにパディングを与えてはいけません。

はパディングが100％幅ために加算されているので、ちょうどこの

#header { 
    padding: 30px 0px; 
    width: 100%; 
    height: 250px; 
    background-color: grey; 
} 

#name { 
    padding: 5px; 
    font-size: 25px; 
    float: left; 
    margin-left: 40px; 
} 

#navbar { 
    float: right; 
    text-align: right; 
    margin-right: 40px; 
} 

Answer 6

みたいです名前とナビゲーションバーのdivに

をいくつかのマージンを追加します。

#header{ 
    padding: 30px; 
    width: 100%; 
    height: 250px; 
    background-color: grey; 
    box-sizing: border-box; 
} 

Answer 7

Header.Width = 100％とHeader.Padding = 30px問題を引き起こしている：

はそのように、ボックスのサイズ変更を使用してみてください。

ヘッダーには幅の100％を使用し、パッドには30pxを使用するようブラウザに指示します。したがって、幅は、パディングによって作成されるスペースの100％+ 30pxです。

すべてのページで使用可能な領域の100％が使用されるように、幅をbodyプロパティに移動してみてください。それはそれを修正する必要があります。