フッタが過剰になっています

Question

私のフッタには、水平方向のオーバーエフェクトが必要ですが、理論的にはページのサイズになるように、幅を100％に設定しました。どんな助けでも大歓迎です。

HTML

<footer> 
<p>Mandurah Jetty Maintenance | Copyright &copy 2017</p> 
</footer> 

CSS

footer{ 
padding: 20px; 
color: #ffffff; 
background-color: #333; 
text-align: center; 
width: 100%; 
position: absolute; 
left: 0; 
bottom: 0; 
overflow: hidden; 


} 

Answer 1

フッター、ページの/はるか左右に到達していない意味場合は、これにあなたのCSSを変更：

footer { 
padding: 20px, 0px, 0px, 0px; //Top, right, bottom, left 
color: #ffffff; 
background-color: #333; 
text-align: center; 
width: 100%; 
position: absolute; 
left: 0; 
bottom: 0; 
overflow: hidden; 
} 

Answer 2

それはその要素のwidthとheightを高め、デフォルトでelementにpadding or border propertiesを追加する場合box-sizing:border-box; を追加します。したがって、box-sizing:border-boxを追加すると、次のdivのincrementは割り当てられたパディングと境界線の状態を維持します。

デフォルトのCSSボックスモデル を変更して要素の幅と高さを計算するために、ボックスサイジングプロパティが使用されます。

footer{ 
 
padding: 20px; 
 
color: #ffffff; 
 
background-color: #333; 
 
text-align: center; 
 
width: 100%; 
 
position: absolute; 
 
left: 0; 
 
bottom: 0; 
 
overflow: hidden; 
 
box-sizing:border-box; /*Add this*/ 
 
}

<footer> 
 
<p>Mandurah Jetty Maintenance | Copyright &copy 2017</p> 
 
</footer>