Wie kann ich die Fußzeile an die gesamte Breite des Bildschirms anpassen lassen?

Hallo ich möchte wissen, wie kann ich die Grenze der Fußzeile nehmen Sie die volle Breite des Bildschirms und auch volle Breite Hintergrund auf der Fußzeile, danke im Voraus. :)Wie kann ich die Fußzeile an die gesamte Breite des Bildschirms anpassen lassen?

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>First</title> 
    <link rel="stylesheet" href="css/first.css"> 
</head> 
<body> 
<div id="header"> 

</div> 



<div class="footer"> 
<p>This is the Footer</p> 
</div> 

</body> 
</html> 

#header { 

background-color:#99283c ; 
margin: 0px; 
height: 90px; 

} 

body{ 

    background-color: yellow; 
    margin: 0px; 

} 


.footer p{ 

    margin-top:38%; 
    margin-left: 45%; 
    border-top: 1px solid black; 
    padding-top: 10px; 
    max-width: 100%; 

}

Quelle

2016-04-30 user3261724

Hey bitte meine Antwort unten überprüfen .. –

100% Breite geben ' –

@PsycoKillers .footer' er/sie mit margin-left: 45%, bitte seine Frage prüfen. .. –

Ich schlage vor, Sie tun, wie folgt.

Hier habe ich einen Container erstellt und die Kinder (Header, Inhalt, Fußzeile) flex Elemente. Auf diese Weise können Sie Ihr Layout sehr einfach steuern.

html, body{ 
 
    height: 100%; 
 
    margin: 0px; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100%; 
 
} 
 
.header { 
 
    background-color:#99283c ; 
 
    height: 90px; 
 
} 
 
.content { 
 
    flex: 1;     /* content fill up space left */ 
 
    background-color: yellow; 
 
} 
 
.footer { 
 
    border-top: 1px solid black; 
 
    background-color: red; 
 
}

<div class="container"> 
 

 
    <div class="header"> 
 
    <p>This is the Header</p>  
 
    </div> 
 

 
    <div class="content">  
 
    <p>This is the Content</p> 
 
    </div> 
 

 
    <div class="footer"> 
 
    <p>This is the Footer</p> 
 
    </div> 
 

 
</div>

Quelle

2016-04-30 07:00:57 LGSon

Vielen Dank, Mann! – user3261724

Sie haben unter CSS margin-left:45% von .footer p versuchen zu entfernen:

.footer p { 
    margin-top: 38%; 
    text-align: center; 
    border-top: 1px solid black; 
    padding-top: 10px; 
    max-width: 100%; 
}

prüfen Fiddle

Quelle

2016-04-30 06:13:34

Erstellen Sie JSFiddle oder Code-Snippet – Mohammad

Vielen Dank! Könnten Sie mir bitte sagen, was ich tun soll, wenn ich die volle Hintergrundfarbe volle Breite und Höhe haben möchte? – user3261724

Es hat bereits volle Breite und Höhe, was ist der Punkt dann? –

Wie kann ich die Fußzeile an die gesamte Breite des Bildschirms anpassen lassen?

Antwort

Verwandte Themen