Warum sollte ich ein Container-Div in HTML verwenden?

73

Ich habe festgestellt, dass eine übliche Technik darin besteht, ein generisches Container-Div in der Wurzel des Body-Tags zu platzieren:

<html>
  <head>
    ...
  </head>
  <body>
    <div id="container">
      ...
    </div>
  </body>
</html>

Gibt es einen triftigen Grund dafür? Warum kann das CSS nicht einfach auf das Body-Tag verweisen?

html css user44810
quelle

Antworten:

67

Das Container-Div und manchmal das Content-Div werden fast immer verwendet, um ein komplexeres CSS-Styling zu ermöglichen. Das Body-Tag ist in gewisser Hinsicht etwas Besonderes. Browser behandeln es nicht wie ein normales Div. Seine Position und Abmessungen sind an das Browserfenster gebunden.

Aber ein Container-Div ist nur ein Div und Sie können es mit Rändern und Rändern stylen. Sie können ihm eine feste Breite geben und mit zentrieren margin-left: auto; margin-right: auto.

Außerdem können Inhalte, wie z. B. ein Copyright-Hinweis, außerhalb des Container-Bereichs angezeigt werden, jedoch nicht außerhalb des Körpers, sodass Inhalte außerhalb eines Rahmens zulässig sind.

Jonathan Tran
quelle
12

Mit dieser Methode können Sie Ihren gesamten Inhalt flexibler gestalten. Erstellen Sie effektiv zwei Container, die Sie stylen können. Das HTML-Body-Tag, das als Hintergrund dient, und das div mit der ID eines Containers, der Ihren Inhalt enthält.

Auf diese Weise können Sie Ihren Inhalt innerhalb der Seite positionieren und gleichzeitig einen Hintergrund oder andere Effekte ohne Probleme gestalten. Denken Sie daran als "Rahmen" für den Inhalt.

Mitchel Sellers
quelle
2

Die häufigsten Gründe für mich sind:

  1. Das Layout kann eine feste Breite haben (ja, ich weiß, ich mache viel Arbeit für Designer, die feste Breiten lieben) und
  2. Das Layout kann also zentriert werden, indem Textausrichtung: Mitte auf den Körper und dann Rand: Auto links und rechts vom Container div angewendet wird.
da5id
quelle
1
Der Container benötigt auch feste "prozentuale" Breiten. (im Wesentlichen eine Flüssigkeitsbreite)
Armstrongest
2 ist heutzutage nicht wirklich relevant, Sie benötigen es nur für IE 5.5 und früher und die meisten Leute unterstützen IE nicht so alt.
Quentin
1

Bestimmte Browser (<cough> Internet Explorer) unterstützen bestimmte Eigenschaften des Körpers nicht, insbesondere widthund max-width.

QUentin
quelle
1

Ich weiß, dass dies eine alte Frage ist, aber ich habe dieses Problem selbst bei der Neugestaltung einer Website gelöst. Troy Dalmasso brachte mich zum Nachdenken. Er macht einen guten Punkt. Also fing ich an zu sehen, ob ich es ohne Container div zum Laufen bringen könnte.

Ich könnte, wenn ich die Breite des Körpers einstelle. In meinem Fall auf 960px.

Dies ist die CSS, die ich benutze:

html {
  text-align:center;
}

body {
  margin: 0 auto;
  width: 960px;
}

Dadurch werden die Inline-Blöcke, die ebenfalls eine feste Breite haben, schön zentriert.

Hoffe, das ist für jeden von Nutzen.

Michael Albers
quelle
1

Dies ist eine der größten schlechten Gewohnheiten von Front-End-Codierern.

Alle Antworten über mir sind falsch. Der Körper nimmt eine Breite, Ränder, Ränder usw. an und sollte als anfänglicher Container fungieren. Das HTML-Element sollte wie beabsichtigt als Hintergrund-Canvas fungieren. Auf Dutzenden von Websites, die ich erstellt habe, musste ich nur einmal ein Container-Div verwenden.

Ich wäre bereit zu sein, dass dieselben Codierer, die Container-Divs verwenden, auch ihr Markup mit Divs innerhalb von Divs verunreinigen - überall sonst.

Tu es nicht. Verwenden Sie divs sparsam und streben Sie ein schlankes Markup an.

- = - = - UPDATE - Ich bin mir nicht sicher, was mit SO falsch ist, da ich diese Antwort von vor 5 Jahren bearbeiten kann, aber ich kann nicht auf die Kommentare antworten, da darin steht, dass ich 50 Wiederholungen benötige, bevor ich dies tun kann. Dementsprechend werde ich meine Antwort zu den hier eingegangenen Antworten hinzufügen. - = - = -

Ich habe dies erst Jahre nach meiner Antwort gefunden und sehe, dass es einige Folgeantworten gibt. Und sicher scherzen Sie?

Die installierte Platzhalter-Site, die Sie für meine Domain gefunden haben und von der ich nie behauptet habe, sie sei mein Markup oder Styling oder die sogar in meinem Beitrag erwähnt wurde, war ganz klar eine grundlegende CMS-Installation mit nicht einem Wort Inhalt (so viel wurde auf der Homepage gesagt). Das war nicht mein Markup und Styling. Das war die Silverstripe-Standardvorlage. Und ich nehme keine Anerkennung dafür. Es ist jedoch vielleicht eines von nur zwei Beispielen, die ich mir vorstellen kann, dass ein Container-Div erforderlich wäre.

Beispiel 1: Eine generische Vorlage für Unbekannte. In diesem Fall wurde eine Standard-CMS-Vorlage angezeigt, die Divs innerhalb von Divs innerhalb von Divs enthielt.

Der Horror.

Beispiel 2: Ein dreispaltiges Layout, damit die Fußzeile richtig gelöscht wird (ich denke, dies war wahrscheinlich das Szenario, in dem ich ein Container-Div benötigte, das schwer zu merken ist, weil es vor Jahren war.)

Ich habe gerade ein Thema für meine Domain erstellt (noch nicht fertiggestellt) und mit dem Laden von Inhalten begonnen. Klicken Sie auf den Link, um dieses leicht zu erreichende Beispiel für semantisches Markup zu erhalten.

http://www.bitbeyond.com

Ehrlich gesagt bin ich verblüfft, dass die Leute denken, Sie brauchen tatsächlich einen Container-Div und beginnen mit einem, bevor Sie überhaupt nur einen Körper ausprobieren. Der Körper, wie ich ihn einmal von einem der ursprünglichen Autoren der CSS-Spezifikation erklärt hörte, war als "anfänglicher Container" gedacht.

Markup sollte nach Bedarf hinzugefügt werden, nicht weil Sie es so gesehen haben.

Troy Dalmasso
quelle
Können wir eine dieser Seiten sehen?
Joe Holloway
13
Ich wollte gerade auf seine Website verweisen, aber das verwendet einen Container und verschachtelte Divs.
Chrisbtoo
Ja, diese Seite body > div#BgContainer > div#Containerscheint zu widersprechen, aber vielleicht ist das das einzige Mal von Dutzenden. PS Ich habe nicht abgelehnt, ich bin ehrlich neugierig, eine dieser rein semantischen Sites zu sehen, von denen ich immer wieder höre.
Joe Holloway
Dies kann bei modernen Browsern der Fall sein. Ich benutze html { font-family: sans-serif; }zum Beispiel die ganze Zeit, um das HTML-Element zu formatieren. Wie bereits erwähnt, funktioniert dies jedoch für bestimmte CSS-Eigenschaften in älteren Browsern nicht.
Jonathan Tran
1
Genau. Die meisten Websites haben heutzutage so viele verschachtelte Divs, dass der Code schrecklich unlesbar wird. Mir ist klar, dass die meisten Entwickler nur einen Site Builder verwenden! Site Builder verwenden so viel redundanten Code. Einmal habe ich eine Site mit nur einfachen Tabellen neu erstellt, um genau das gleiche Layout / die gleichen Funktionen zu erzielen, und 90% weniger Code verwendet. Die automatisch erstellte Site verwendet buchstäblich 10-mal zu viel Code! Alles in DIVs! Völlig unnötig.
ZealousHypocrites
0

div-Tags werden verwendet, um die Webseite so zu gestalten, dass sie für die Benutzer oder das Publikum der Website optisch ansprechend aussieht. Durch die Verwendung von container-div in HTML wird die Website professioneller und attraktiver und daher möchten mehr Menschen Ihre Seite erkunden.

Kits
quelle
0

Gut,

Das Container-Div ist sehr gut zu haben, denn wenn Sie möchten, dass die Site zentriert wird, können Sie es einfach nicht nur mit body oder html tun ... Aber Sie können es mit divs. Warum Container? Es wird normalerweise verwendet, nur weil der Code sauber und lesbar sein muss. Das ist also Container ... Es enthält alle Websites, falls Sie damit herumspielen möchten :)

Viel Glück

David Stančík
quelle
-2

Die meisten Browser verwenden standardmäßig die Größe einer Webseite. Manchmal wird die Seite in einem anderen Browser nicht gleich angezeigt. Durch die Verwendung des Benutzers kann also für ein bestimmtes HTML-Element geändert werden. Beispielsweise kann der Benutzer Rand, Größe, Breite, Höhe usw. eines bestimmten HTML-Tags hinzufügen.

Max_pain
quelle