CSSフッター100％の幅でスクロールバーが追加されます

Question

このページのフッター：https://jsfiddle.net/strathaxxs/bbhr1j38/は機能しません。多くのことを試しました。コードは次のとおりです。

<title>Homepage</title> 
    <style> 
    html { 
    height: 100%; 
     margin: 0; 
    padding: 0; 
} 
body { 
    font-family: Roboto; 
min-height: 100%; 
margin: 0; 
padding: 0; 
font-family: sans-serif; 
} 
#header { 
    background-color:black; 
    color:white; 
    text-align:center; 
    padding:5px; 
} 
#nav { 
    line-height:30px; 
    background-color:#eeeeee; 
    height:300px; 
    width:100px; 
    float:left; 
    padding:5px; 
} 
#section { 
    width:350px; 
    float:left; 
    padding:10px; 
} 
#footer { 
    background-color:black; 
    color:white; 
    clear:both; 
    text-align:center; 
    padding:5px; 
    width: 100%; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
} 
    </style> 


<div id="header"> 
<h1>bla bla bla </h1> 
</div> 

<div id="nav"> 
bla <br> 
bla bla <br> 
bla 
</div> 

<div id="section"> 
<h2>bla bla </h2> 
<p>bla bla bla bla bla bla bla bla bla </p> 
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> 
</div> 

<div id="footer"> 
Copyright &copy; StratHaxxs.org 
</div> 

スクロールバーを追加するだけです。私は今までこの問題を抱えていました。私はウェブサイトを作っています。

Answer 1

これを試してください：

#footer { 
    ... 
    padding:5px 0; /* Remove the horizontal padding, keep the vertical padding */ 
    width: 100%; 
    ... 
} 

は基本的に同一の要素に設定されたこれらの二つpropoerties 100（いずれかの側にビューポートの幅の100％プラス 5画素をしました％+ 10px）。余分な10ピクセルでスクロールバーが表示されます。

Answer 2

フッタからパディングを外してください。絶対位置を決めて100％の幅に設定しているので、パディングを追加するとスクロールバーが強制されます。

https://jsfiddle.net/t2zya13k/

#footer { 
    background-color:black; 
    color:white; 
    clear:both; 
    text-align:center; 
    /*padding:5px;*/ 
    width: 100%; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
} 

Answer 3

これを解決する1つの方法は、フッターのbox-sizingプロパティをborder-boxに設定することです。それには、合計サイズの5pxのパディングが含まれます。そうでなければ、合計幅は100％とパディングから2×5pxになります。多くのHTMLのWeb開発者に発生した繰り返し問題の

https://jsfiddle.net/bbhr1j38/1/

#footer { 
    background-color:black; 
    color:white; 
    clear:both; 
    text-align:center; 
    padding:5px; 
    width: 100%; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    box-sizing:border-box; 
} 

Answer 4

一つ、パディングが実際にどのように振る舞うかです。

余白：要素の幅を超えています。

埋め込み：要素の内側にあり、です。要素の幅に加算されます。

したがって、幅が+ 5px、右が+ 5pxの場合、要素の幅は100％より大きくなります。混乱を避けるために

だから、パディングがどのように動作するかに起因し、次のプロパティが

box-sizing:border-box; 

を導入し、上記のプロパティは、パディングが100％幅の一部であることを示しています。要素が100％を超えないようにします。

このプロパティは、グリッド要素をパーセンテージで処理しながら非常に明確なアイデアを提供するために、すべての応答フレームワークの基本部分となっています。

*{ 
 
    box-sizing:border-box; 
 
} 
 
html { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    font-family: Roboto; 
 
    min-height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: sans-serif; 
 
} 
 

 
#header { 
 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 5px; 
 
} 
 

 
#nav { 
 
    line-height: 30px; 
 
    background-color: #eeeeee; 
 
    height: 300px; 
 
    width: 100px; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 

 
#section { 
 
    width: 350px; 
 
    float: left; 
 
    padding: 10px; 
 
} 
 

 
#footer { 
 
    background-color: black; 
 
    color: white; 
 
    clear: both; 
 
    text-align: center; 
 
    padding: 5px; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    left: 0px; 
 
}

<title> 
 

 
    Homepage</title> 
 
<div id="header"> 
 
    <h1>bla bla bla </h1> 
 
</div> 
 

 
<div id="nav"> 
 
    bla 
 
    <br> bla bla 
 
    <br> bla 
 
</div> 
 

 
<div id="section"> 
 
    <h2>bla bla </h2> 
 
    <p>bla bla bla bla bla bla bla bla bla </p> 
 
    <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> 
 
</div> 
 

 
<div id="footer"> 
 
    Copyright &copy; StratHaxxs.org 
 
</div>