Hinzufügen von Hintergrundbilder haben 2 Nachteile:
Jedes Mal, wenn Sie die Farbe Ihres Kopfes Sie Ihren Photoshop ändern mögen öffnen und die Farbe dort ändern und es dann wieder in Ihrem CSS ändern.
Jetzt möchten Sie die Hintergrundfarbe der Kopfzeile über die Seite strecken, aber was, wenn Sie das mit der Fußzeile auch tun möchten?
Die einfachste Lösung ist diese:
(Sie nicht nur eine einfache Möglichkeit zu schaffen, die Farbe über die gesamte Seite zu strecken, unterschiedliche Farbe in jedem Header Inhalt und Fußzeilen, verwenden zu können, sondern auch es spart sich aus der Doppel Marge Problem des IE (wenn Sie Breite und Marge in den gleichen Elementen verwenden)
index.html.
<html>
<body id="body">
<div id="header">
<div class="container">
<!-- header's content here -->
</div><!-- .container -->
</div><!-- #header -->
<div id="content">
<div class="container">
<!-- main content here -->
<div id="footer">
<div class="container">
<!-- footer's content here -->
</div><!-- .container -->
</div><!-- #footer -->
</body>
</html>
style.css:
.container {
margin: 0 auto;
overflow: hidden;
padding: 0 15px;
width: 960px;
}
#header {
background: #EEE;
}
#content {
background-color: #F9F9F9;
}
#footer {
background-color: #333;
color: #BBB;
clear: both;
}
In diesem Beispiel zentriert die div.container die Elemente und gibt ihnen auch eine Breite, und die Hintergrundfarbe kann über die Seite, weil # header, #content und #footer nicht haben Breite strecken . Und in Zukunft nur Rand und Padding auf divs innerhalb .container anwenden, und Sie werden viele Probleme mit IE in der Zukunft speichern.
Dies ist eine großartige Antwort. Allerdings ist hier ein Problem, das einige Leute auffangen kann - es hat mich auf jeden Fall erwischt! Ein Kollege von mir machte etwas Debugging und musste herausfinden, welches Layout in verschiedenen Teilen unserer Web-App verwendet wurde. Der einfachste Weg, dies herauszufinden, war, einen Kommentar am Anfang der Vorlagedatei ... vor der DOCTYPE-Deklaration zu setzen. Sie haben es erraten: Die Seite wurde in Firefox perfekt gerendert und der einzige bemerkenswerte Unterschied in IE war, dass die obere Leiste sich nicht ganz über die Seite erstreckte. Die Lösung bestand darin, sicherzustellen, dass vor dem DOCTYPE nichts war. – JamesG