Fußzeile ist überfordert

Question

Ich brauche etwas Hilfe mit meiner Fußzeile, ihre horizontale Überdehnung, ich habe die Breite auf 100% festgelegt, so sollte es theoretisch die Größe der Seite sein. Jede Hilfe würde sehr geschätzt werden.

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

Wenn Sie meinen, die Fußzeile nicht ganz links/rechts auf der Seite erreicht dann CSS dies ändern:

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

box-sizing:border-box; hinzufügen Wenn padding or border properties zu einem element Hinzufügen es standardmäßig die width und height dieses Elements erhöhen. Also durch Hinzufügen von,stoppt dies, dass increment auf folgenden div immer noch den Status der zugewiesenen Polsterung und Grenze.

Die Box-Sizing-Eigenschaft wird verwendet, um das Standard-CSS-Boxmodell zu ändern, das zur Berechnung der Breite und Höhe der Elemente verwendet wird.

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>