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

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - HTML / CSS: Was sind 100% Höhe? (https://www.delphipraxis.net/197985-html-css-sind-100-hoehe.html)

Der schöne Günther

24. Sep 2018 19:17

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

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

Ich setze bei
Delphi-Quellcode:

<body>

die
Delphi-Quellcode:

height

auf
Delphi-Quellcode:

100%
ich packe einen
Delphi-Quellcode:

<div>

mit Höhe
Delphi-Quellcode:

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

Delphi-Quellcode:

<div>

nur noch so hoch wie die eine Zeile Text.

Warum?

Redeemer

24. Sep 2018 20:20

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

Delphi-Quellcode:

<!DOCTYPE html>

, besser bekannt als HTML5, gibt vor, dass das

Delphi-Quellcode:

<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

Delphi-Quellcode:

ghubi01

24. Sep 2018 20:26

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

Liste der Anhänge anzeigen (Anzahl: 2)

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

24. Sep 2018 21:49

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

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:

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

25. Sep 2018 22:04

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

Zitat:

Zitat von ghubi01 (Beitrag 1414046)

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

25. Sep 2018 23:07

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

Hallo,

@Redeemer

ich verstehe nicht worauf Du hinaus willst. :?:

Ghostwalker

26. Sep 2018 07:55

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

Zitat:

Zitat von Redeemer (Beitrag 1414174)

Zitat:

Zitat von ghubi01 (Beitrag 1414046)

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

26. Sep 2018 07:57

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

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

Delphi.Narium

26. Sep 2018 08:50

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

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

26. Sep 2018 08:56

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

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.

Alle Zeitangaben in WEZ +1. Es ist jetzt 04:27 Uhr.