HTML / CSS: Was sind 100% Höhe?

**Der schöne Günther**

Ich kenne mich mit HTML & CSS nicht wirklich aus. Dumme Frage:

Ich setze bei <body> die height auf 100%
ich packe einen <div> mit Höhe 100% rein
Er füllt, wie erwartet die gesamte Bildschirmhöhe aus

Quelltext:

Code:

			<!-- <!DOCTYPE html> -->

<html>

<head>

   <style>

      body {

         height: 100%; 

         padding:0px; 

         margin: 0px;

      }

   </style>

</head>

<body>

   <div style="height: 100%; background-color: red;">

      Hallo Welt

   </div>

</body>

</html>

Gehe ich nun hin und kommentiere oben den DocType aus, dann ist der rote <div> nur noch so hoch wie die eine Zeile Text.

Warum?

**Redeemer**

<!DOCTYPE html> , besser bekannt als HTML5, gibt vor, dass das <body> -Element standardmäßig die gesamte Höhe einnimmt.

Aus genau diesem Grund sind Höhenangaben in Prozent zu vermeiden. Die korrekte Einheit für Höhenangaben ist vh .

**ghubi01**

Hallo,

ich bin jetzt auch nicht der HTML Freak.

Aber vielleicht gibt es hier eine Erklärung:

https://www.mediaevent.de/xhtml/doctype.html

Ich habe Dein Beispiel mal mit Microsoft Visual Studio 2010 getestet.
In der Quelltextansicht sind <head> und <style> bei aus kommentierten <!DOCTYPE html> grün "unterschlängelt".
Geht man mit der Maus drauf werden folgende Hinweise angezeigt (siehe Bilder):

**Der schöne Günther**

Danke für die Antworten.

Danke für den Tipp mit VS, das wird mir noch öfter helfen 😊

Danke auch für den Tipp mit den Spezifikationen. Ich habe noch etwas gesucht und hier hatte jemand exakt die gleiche Frage und es unterhaltsam aufbereitet:

https://www.kirupa.com/html5/make_bo...ser_height.htm

Des Rätsels Lösung: Dem <html>-Knoten noch eine Höhe von 100% geben. Da wäre ich nie drauf gekommen.

Zitat:

See, our body element's height is set to be 100% of the height of the containing block. The containing block is the html element, and we never specified a height on it. Because there isn’t any content on the page, the height of the html element...wait for it...is also 0. The solution to our problem then would be to specify a height value of 100% on the html element as well:

Das sieht dann tatsächlich so aus:

markieren

Code:

			<!DOCTYPE html>

<html style="height: 100%;">

<head>

   <style>

      body {

         height: 100%; 

         padding:0px; 

         margin: 0px;

      }

   </style>

</head>

<body>

   <div style="height: 100%; background-color: red;">

      Hallo Welt

   </div>

</body>

</html>

**Redeemer**

Zitat von ghubi01:

Ich habe Dein Beispiel mal mit Microsoft Visual Studio 2010 getestet.

Anderes Thema: Ich hab gerade mal getestet: Windows 3.11 sagt, die x64-Anwendungen aus Delphi 10.2 sind ungültig. Kann ich mir nicht erklären, muss ein Bug in Delphi sein, oder?

**ghubi01**

Hallo,

@Redeemer

ich verstehe nicht worauf Du hinaus willst.

**Ghostwalker**

Zitat von Redeemer:

Zitat von ghubi01:

Ich habe Dein Beispiel mal mit Microsoft Visual Studio 2010 getestet.

Anderes Thema: Ich hab gerade mal getestet: Windows 3.11 sagt, die x64-Anwendungen aus Delphi 10.2 sind ungültig. Kann ich mir nicht erklären, muss ein Bug in Delphi sein, oder?

Ähm....nö....3.11 ist weder 32 noch 64 Bit. Ist noch 8 Bit mit MS-Dos drunter. Da geht mit aktuellen compilern nada

@Günther

Du solltest die CSS auch besser in eine eigene Datei auslagern und mit dem link-Tag einbinden. Damit erreichst du ein einheitliches Look & Feel.

**KodeZwerg**

Er kann ja probieren den Win32S Extender mit heutigen 32bit code zum laufen zu kriegen

**Delphi.Narium**

Was Redeemer mit seinem "Vergleich" sagen wollte ist wohl eher:

Ich mache keinerlei Angaben darüber, welche HTML-Version ich verwenden möchte, erstelle nichtmal ein syntaktisch korrektes HTML-Fragment.

Warum kann der Browser mir das dann nicht richtig anzeigen?

Analog zu: Ich sage Delphi nicht, für welche Zielplattform ich mein Kompilat haben möchte. Warum läuft es dann nicht auf jedem Betriebssystem?

Oder anders formuliert:

Bei dem Codebeispiel aus dem Eingangspost kann man froh sein, dass ein Browser es überhaupt anzeigt. Er kann da nicht mehr als raten, was wohl gemeint sein könnte.
Er muss interpretieren und das macht er halt anders, als vom Anwender erwartet. Aber liegt der Fehler deshalb nun beim Browser?

http://webkompetenz.wikidot.com/html...tandards-modus

**Der schöne Günther**

Wow, also dieses Gleichnis wäre mir auch nicht klar gewesen. Der Mann spricht in Zungen.

Und die Frage war eher "Wenn ich, ganz standardkonform, ein HTML5-Doctype mache, weshalb macht er es nicht über 100% der Bildschirmhöhe denn dies hätte ich erwartet". Aber jetzt wissen wir es ja. Wir können CSS und Windows 3.11 nun beiseite legen.

HTML / CSS: Was sind 100% Höhe?

HTML / CSS: Was sind 100% Höhe?

AW: HTML / CSS: Was sind 100% Höhe?

AW: HTML / CSS: Was sind 100% Höhe?

AW: HTML / CSS: Was sind 100% Höhe?

AW: HTML / CSS: Was sind 100% Höhe?

AW: HTML / CSS: Was sind 100% Höhe?

AW: HTML / CSS: Was sind 100% Höhe?

AW: HTML / CSS: Was sind 100% Höhe?

AW: HTML / CSS: Was sind 100% Höhe?

AW: HTML / CSS: Was sind 100% Höhe?

Stichworte

Forumregeln

Redeemer Registriert seit: 19. Jan 2009 Ort: Kirchlinteln (LK Verden) 1.051 Beiträge Delphi 2009 Professional	#2 AW: HTML / CSS: Was sind 100% Höhe? 24. Sep 2018, 21:20 <!DOCTYPE html> , besser bekannt als HTML5, gibt vor, dass das <body> -Element standardmäßig die gesamte Höhe einnimmt. Aus genau diesem Grund sind Höhenangaben in Prozent zu vermeiden. Die korrekte Einheit für Höhenangaben ist vh . Janni 2005 PE, 2009 PA, XE2 PA
	Zitat

Redeemer Registriert seit: 19. Jan 2009 Ort: Kirchlinteln (LK Verden) 1.051 Beiträge Delphi 2009 Professional	#5 AW: HTML / CSS: Was sind 100% Höhe? 25. Sep 2018, 23:04 Zitat von ghubi01: Ich habe Dein Beispiel mal mit Microsoft Visual Studio 2010 getestet. Anderes Thema: Ich hab gerade mal getestet: Windows 3.11 sagt, die x64-Anwendungen aus Delphi 10.2 sind ungültig. Kann ich mir nicht erklären, muss ein Bug in Delphi sein, oder? Janni 2005 PE, 2009 PA, XE2 PA
	Zitat

ghubi01 Registriert seit: 18. Nov 2017 129 Beiträge Delphi 12 Athens	#6 AW: HTML / CSS: Was sind 100% Höhe? 26. Sep 2018, 00:07 Hallo, @Redeemer ich verstehe nicht worauf Du hinaus willst.
	Zitat

KodeZwerg Registriert seit: 1. Feb 2018 3.691 Beiträge Delphi 11 Alexandria	#8 AW: HTML / CSS: Was sind 100% Höhe? 26. Sep 2018, 08:57 Er kann ja probieren den Win32S Extender mit heutigen 32bit code zum laufen zu kriegen Gruß vom KodeZwerg
	Zitat